本文将详细的讲解如何正确的学习css动画样式的布局，css给我们新增加了很多的样式，动画的能够使我们的网页更新有活力，所以本文将详细的介绍animation属性以及他的使用技巧。
1.动画调用(1) 什么是动画
动画是 CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
(2) 动画的基本使用
先定义动画
在调用定义好的动画
(3) 语法格式(定义动画)
(4)代码演示
@keyframesmove{
0%{
width:100px
}
100%{
width:200px
}
}
div{
/*调用动画 起的类名*/
animation-name:move
/*持续时间*/
animation-duration:1s
}
2.动画属性属性
描述
@keyframes
规定动画。
animation
所有动画属性的简写属性，除了animation-play-state属性。
animation-name
规定@keyframes动画的名称。(必须的)
animation-duration
规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的)
animation-timing-function
规定动画的速度曲线，默认是ease。
animation-delay
规定动画何时开始，默认是0。1s
animation-iteration-count
规定动画被播放的次数，默认是1，还有infinite（无限循环）
animation-direction
规定动画是否在下一周期逆向播放，默认是normal ,alternate逆播放
animation-play-state
规定动画是否正在运行或暂停。默认是running,还有paused。
animation-fill-mode
规定动画结束后状态，保持forwards回到起始backwards
3.代码演示
div{
width:100px
height:100px
background-color:aquamarine
/*动画名称*/
animation-name:move
/*动画花费时长*/
animation-duration:2s
/*动画速度曲线*/
animation-timing-function:ease-in-out
/*动画等待多长时间执行*/
animation-delay:2s
/*规定动画播放次数infinite:无限循环*/
animation-iteration-count:infinite
/*是否逆行播放*/
animation-direction:alternate
/*动画结束之后的状态*/
animation-fill-mode:forwards
}
div:hover{
/*规定动画是否暂停或者播放*/
animation-play-state:paused
}
