CSS3-animation动画属性

animation 动画

@keyframes 关键帧动画

先用@keyframes预先定义好元素在整个过程中要经历的状态，然后再通过animation调用动画。

动画状态

from 动画开始
to 动画结束
也可以用百分比%表示，例如0%、50% 、75%、100%，实际开发中用%较多。
代码演示：

animaition 常用属性

animaition 常用属性	属性值
animation-name 动画名称
animation-duration 动画持续时间	0.5s/1s
animation-timing-function 动画运动曲线	linear匀速、 ease慢-快-慢（默认）
animation-delay 延迟时间	0.5s/1s
animation-iteration-count: 循环次数	可跟数字：1,2；infinite 无限循环
animation-fill-mode 动画结束状态	forwards 停留在 100% 的样式；backwards 停留在 0% 的样式
animation-play-state 播放/ 暂停
animation-name 动画名称	running播放；paused暂停

animaition 属性复合写法：

animation: name duration timing-function delay iteration-count direction fill-mode;
动画：名称 持续时间 运动曲线 演示 循环次数 动画结束时候的状态

注意：

• animation-play-state不能使用复合写法，要单独写。
• 多个动画写法，用逗号 ，隔开

总结

动画代码案例演示：

    /* 1 声明动画函数 */
    @keyframes ani_div {
  0%{
    width: 100px;
    background-color: red;
  }
  50%{
    width: 150px;
    background-color: green;
  }
  100%{
    width: 300px;
    height: 300px;
    background-color: yellow;
  }
}

div {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin: 100px auto;
  /* 2 调用动画 */
  animation-name: ani_div;
  /* 持续时间 */
  animation-duration: 2s;
}