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;
  		}