css里的一些动画效果

1、转动效果

animation: amountRotate 10s linear infinite;

@keyframes amountRotate {
    from {
      transform: translate(0) rotate(0deg);
    }
    to {
      transform: translate(0) rotate(360deg);
    }
}

2、心跳动画

animation: scaleDraw 3s ease-in-out infinite;

// 放大缩小
@keyframes scaleDraw {
    0%{
        transform: scale(1); 
    }
    25%{
        transform: scale(1.1);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.1);
    }
}

3、往复动画

animation: amountOne 10s linear infinite;

@keyframes amountOne{
    0% {
        transform: translate(0) rotate(0deg);
    }
    50% {
        transform: translate(0) rotate(45deg);
    }
    100% {
        transform: translate(0) rotate(0deg);
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容