【css3动画】

1.css3动画
动画是css3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相较过渡：动画可以实现更多变化更多控制，连续自动播放效果
制作步骤：

• 先定义动画
• 在使用（调用）动画

1）用keyframes定义动画（即定义选择器）

@keyframes  定义动画 {
  0% {
       width:100px;
   }
 100% {
       width:200px;
   }

注：百分比是总的时间的划分
2）元素使用动画

div {
  animation-name:动画名称;
  animation-duration:持续时间;
  }

2.动画常用属性
3.动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态

• 速度曲线细节 animation-timing-function：规定动画的速度曲线 默认 ease()
• 速度曲线步长 steps(n) 分n步来完成