CSS中的动画的学习总结

最新推荐文章于 2025-10-06 15:53:18 发布

原创最新推荐文章于 2025-10-06 15:53:18 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #动画 #前端

学习内容：

1、CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。

①name；动画名称

②duration：过渡耗时

③iteration-count：循环次数

④timing-function：速度曲线

⑤delay：等待时间

⑥direction：是否反向播放

2、@keyframes 关键帧规则如下：

学习过程：

 @keyframes picture {
            0% { transform:  scale(0.8, 1.2);}
            25% {transform:  scale(1, 1); }
            50% {transform:  scale(0.8, 1.2); }
            70% { transform:  scale(1, 1); }
            80% {transform:  scale(0.8, 1.2); }
            90% {transform:  scale(1, 1); }
            100% { transform:  scale(0.8, 1.2);}
        }

@keyframes wk {
            from{
                
                background-position: 0px  0px;
            }
            to{
               
                background-position:-1600px 0px ;
            }
        }