CSS-关键帧动画

关键帧Keyframes,用来指定动画效果的几个中间状态。

语法为：

@Keyframes colorchange {0% {color: red;}50% {color: blue;}100% {color: green;}}

除了使用百分比，还可以使用from和to

@Keyframes colorchanges {from { //from代表0%color: red;}to { //from代表100%color: green;}}

使用animation调用动画

a:hover {-webkit-animation: colorchange 5s ease 1s;-moz-animation: colorchange 5s ease 1s;-ms-animation: colorchange 5s ease 1s;-o-animation: colorchange 5s ease 1s;animation: colorchange 5s ease 1s;}

animation也是一个复合属性

animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-count,可用值为infinite表示无穷，整数表次数animation-direction 动画播放方向。normal表示正常向前播放，alternate表述偶数次向前，奇数次反向。animation-play-state 播放状态，running表示播放，默认值。paused表示暂停播放。animation-fill-mode 描述动画开始和结束之后发生的操作。

如果觉得《CSS-关键帧动画》对你有帮助，请点赞、收藏，并留下你的观点哦！