本篇文章给大家带来关于css中动画的相关知识，其中包括什么是动画，动画的调用以及多关键帧动画应该怎样实现，希望对你有帮助。
成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、
网站建设、随县网络推广、小程序制作、随县网络营销、随县企业策划、随县品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；
成都创新互联为所有大学生创业者提供
随县建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com1. 什么是动画
在 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视频教程）
文章题目：怎么玩转css动画？（整理分享）
转载来于：
http://www.cdkjz.cn/article/chegco.html
