怎么玩转css动画？（整理分享）

本篇文章给大家带来关于css中动画的相关知识，其中包括什么是动画，动画的调用以及多关键帧动画应该怎样实现，希望对你有帮助。

1. 什么是动画

在 CSS 中，可以使用@keyframes来定义动画
（keyframes 表示“关键帧”）

大致结构：

@keyframes rotation { /* rotation 动画名 */     from {   /* 起始状态 */          transform: rotate(0);     }     to {    /* 结束状态 */          transform: rotate(360deg);     }}

2. 动画的调用

定义动画之后，可以使用 animation 属性调用动画。

立即学习“前端免费学习笔记（深入）”；

animation基本属性：

• name: 动画的名字
  (初始默认值 none)
• duration: 动画时长
  (初始默认值 0s)
• timing function：变化速度曲线
  (初始默认值 ease)
• delay: 延迟时间（动画经过多少时间才开始）
  (初始默认值 0s)
• iteration-count: 动画执行次数
  (初始默认值 1，如果想动画永远执行，写 infinite)

animation:  name | duration | timing function | delay | iteration-count;

除此之外，还有一些属性：

animation-direction(设置是否轮流反向播放动画)

• normal: 以正常的方式播放动画（初始默认值）
• reverse: 以相反的方式播放动画
• alternate: 让动画的第 2、4、6…(偶数次)自动逆向执行
• alternate-reverse: 让动画的奇数次自动逆向执行
  

animation-fill-mode(设置当动画不播放时动画的状态)

• none: 不改变动画的默认行为
• forwards: 让动画停止在最后结束状态
• backwards: 在 animation-delay 所指定的时间段内，应用动画第一个关键帧中的样式
• both: 同时遵循 forwards 和 backwards 的规则
  

animation-play-state(设置动画是播放还是暂停)

• paused: 暂停动画的播放
• running: 正常播放动画

3.  多关键帧动画

对于想要实现多种效果的动画，这个时候就可以使用多关键帧。

大致结构：

@keyframes changeColor { 	0% { 		background-color: red; 	} 	20% { 		background-color: orange; 	} 	40% { 		background-color: blue; 	} 	100% { 		background-color: green; 	}}

（学习视频分享：css视频教程）