css之动画

css要实现动画，需要animation属性

设置动画的步骤

1.定义动画

语法格式

使用@keyframes定义动画

@keyframes 动画名称 {

        百分比 {

                样式名：样式值；

}

}

第二步是调用动画

在某个元素上应用动画，包含以下属性：

• animation-name 使用@keyframes定义的动画名称
• animation-duration 持续时间，默认是 0
• animation-timing-function 速度曲线，默认是 ease
• animation-delay 延时时间，默认是 0
• animation-iteration-count 播放次数，默认是 1，可以是数字，也可以是infinite(无限次)
• animation-direction 播放方向，默认是 normal表示正常播放，alternate表示正反向轮流播放
  
  
  比如要实现一个div盒子，类名是d1,一开始宽高都是100像素，过一段时间变为宽高200像素，再过一阵时间宽高变为300像素
  这里html代码省略
  首先是定义动画，动画名称是change,在动画进度50%时变为宽高200px，100%时变为300px

  @keyframes change {0% {width: 100px;height: 100px;}50% {width: 200px;height: 200px;}100% {width: 300px;height: 300px;}}

  接着开始设置动画，动画持续时间是5s，速度是匀速，延迟2s，播放次数为3次，正反来回播放，css代码如下
   

  		.d1 {width: 100px;height: 100px;border:1px solid red;/*设置动画名*/animation-name:change;/*动画持续时间*/animation-duration: 5s;/*动画播放速度*/animation-timing-function: linear;/*动画延迟时间*/animation-delay:2s;/*动画播放次数*/animation-iteration-count:3;/*动画播放顺序*/animation-direction: alternate;}