web前端入门到实战：彻底掌握css动画【animation】

2025-02-24 技术教程

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？

说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。

上一篇文章我们已经一起学习了transition 的使用，如果有不了解的同学可以查看我的上一篇文章。

话不多说，马上和我一起去学习今天的主角animation吧！

animation 语法值描述@keyframes定义一个动画,@keyframes定义的动画名称用来被animation-name所使用animation-name检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义animation-duration检索或设置对象动画的持续时间animation-timing-function检索或设置对象动画的过渡类型animation-delay检索或设置对象动画的延迟时间animation-iteration-count检索或设置对象动画的循环次数animation-direction检索或设置对象动画在循环中是否反向运动animation-play-state检索或设置对象动画的状态

animation翻译成中文是动画的意思，熟练运用之后你可以用它来做各种各样炫酷的动画。

@keyframes：定义一个动画，定义的动画名称用来被animation-name所使用。

div{ width:50px; height:50px; background:#f40; border-radius:50%; animation:mymove 2s;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

@keyframes主要是做关键帧动画的，每个@keyframes后面都要跟一个名字，事例中使用了mymove作为帧动画的名字，然后可以在样式内对关键帧添加样式，然后根据关键帧 @keyframes就能自动形成流畅的动画了。

animation-name：检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

div{ width:50px; height:50px; background:#f40; border-radius:50%; animation-name:mymove; animation-duration:2s;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

在animation-name使用之前，我们已经定义了一个名为mymove的帧动画，这里把帧动画的名字作为了animation-name的值，含义是当前元素将执行所设置的帧动画。

animation-duration：检索或设置对象动画的持续时间

继续看上一个案例，仅仅有帧动画和需要执行的动画名称是不足以形成动画的，我们还需要设置一个动画执行所需要的时间，这里就用到了animation-duration属性，所以上一案例所展示的时间为两秒钟执行一次。

animation-timing-function：检索或设置对象动画的过渡类型

div{ width:100px; height:50px; background:#f40; position:relative; animation-name:mymove; animation-duration:3s; animation-timing-function:ease-in-out;}@keyframes mymove{ 0% {left:0px;} 100% {left:300px;}}

animation-timing-function的作用就是改变动画在每一帧的快慢。这里transition-timing-function仅展示值为ease-in-out的动画效果，可以理解为慢-快-慢。其他的不做展示，可以参考下表进行理解。

值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。animation-delay：检索或设置对象动画的延迟时间

div{ width:50px; height:50px; background:#f40; border-radius:50%; animation-name:mymove; animation-duration:2s; animation-delay:2s;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

这里animation-delay的值为2s，意思是动画将在延迟两秒秒后延迟执行。

animation-iteration-count：检索或设置对象动画的循环次数

div{ width:50px; height:50px; background:#f40; border-radius:50%; animation-name:mymove; animation-duration:2s; animation-iteration-count:infinite;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}

这里animation-iteration-count的值为infinite，意思是动画将会无限次的执行，这也就达到了循环的效果，当然你还可以给它具体的数值，当执行你设置的次数后它会自动停止。

animation-direction：检索或设置对象动画在循环中是否反向运动

div{ width:100px; height:50px; background:#f40; position:relative; animation-name:mymove; animation-duration:2s; animation-iteration-count:infinite; animation-direction:alternate;}@keyframes mymove{ 0% {left:0px;} 100% {left:300px;}}web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

这里animation-direction的值为alternate，代表动画将会来回的反复执行，他还有其它属性，在下表给出供小伙伴们自己尝试。

值描述normal默认值。动画按正常播放。reverse动画反向播放。alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。initial设置该属性为它的默认值。inherit从父元素继承该属性。animation-play-state：检索或设置对象动画的状态

<style>div{ width:50px; height:50px; background:#f40; border-radius:50%; animation-name:mymove; animation-duration:2s; animation-iteration-count:infinite;}@keyframes mymove{ 0% {width:50px;height:50px;} 50% {width:100px;height:100px;} 100% {width:50px;height:50px;}}</style><body> <button onclick="pause()">暂停</button> <button onclick="run()">恢复</button> <div></div></body>

function pause(){ document.querySelector('div').style.animationPlayState="paused"}function run(){ document.querySelector('div').style.animationPlayState="running"}

animation-play-state的默认值为running，就是动画执行的意思，在实际应用中我们经常使用js来操作这个属性，从而控制动画的播放和暂停。

今天我们一共学习了八个属性值，他们都是属于animation属性的，这里给出属性值在animation中的简写方式。