又是一场大雪过后，天空像海一样蔚蓝，甚至比海更加晶莹剔透。千峰万岭，极目望去，尽是白色，闪耀着一片连接不断的银光。山顶积雪未融，如白银宫网。
animation动画
定义一个动画：
/*设置一个关键帧，定义动画每一步执行的动作*/
@keyframes mybox{
0%{transform: translate(0,0);}
25%{transform: translate(200px,0);}
50%{transform: translate(200px,200px);}
75%{transform: translate(0,200px);}
100%{transform: translate(0,0);}
}
/*引用关键帧，设置动画的执行样式*/ animation: mybox 5s 1s infinite;
注：
1、动画结束后回到初始位置。 2、from->0% to ->100%
animation-name: 动画的名字，（必须存在）
animation-duration: 动画持续的时间
animation-delay:规定多长时间后出现动画效果
animation-iteration-count: 定义动画执行的次数
默认值是：1； 无限次数：infinite
animation-timing-function: 定义动画的效果animation-fill-mode:
none:默认值； 样式在延迟之后生效； backwards： 样式在延迟之前生效； forwards： 在动画结束之后，停在终点位置； both: 具备backwards和forwards的特性；
总结
到此这篇关于css动画效果之animation的常用样式的文章就介绍到这了,更多相关css animation的常用样式内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
![如何利用纯css如何实现缩略图悬停效果实例代码]("images/1.jpg)
![如何使用CSS的table-cell属性如何实现左图右文的排版方法详解]("http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg)
