2.7 CSS 元素动画

什么是帧

。一段动画，就是一段时间内连续播放n个画面。每一张画面，我们管它叫做°帧"。一定时间内连续快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流畅。

人眼24帧

什么是关键帧

。关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的2-3帧。

1.基本使用

• 第一步：定义关键帧

/*写法—*/
@keyframes 动画名{
  from i
  	/*property1 :value1*/
  	/*property2 :value2*/
  }
  
  to {
  	/*property1 : value1*/
  }
}

/*完整方式定义*/
@keyframes 动画名 {
  0% {
    /*property2 :value2*/
  }
  48% {
    /*property2 :value2*/
  }
  ……
  100% {
    /*property2 :value2*/
}

• 第二步：给元素应用动画

• • animation-name : 给元素指定具体的动画(具体的关键帧)
  • animation-duration:设置动画所需时间
  • animation-delay :设置动画延迟
  • animation-iteration-count：指定动画的播放次数

• • • number :动画循环次数
    • infinite :无限循环

• • animation-direction，指定动画方向，常用值如下:

• • • normal :正常方向(默认)
    • reverse :反方向运行
    • alternate : 动画先正常运行再反方向运行，并持续交替运行
    • alternate-reverse : 动画先反运行再正方向运行，并持续交替运行

• • animation-fill-mode ,设置动画之外的状态

• • • forwards :设置对象状态为动画结束时的状态
    • backwards :设置对象状态为动画开始时的状态

• • animation-play-state，设置动画的播放状态，常用值如下:

• • • running :运动(默认)
    • paused :暂停

• • animation-timing-function：设置动画方式

• • • ease :平滑过渡(默认值)
    • linear :线性过渡
    • ease-in:慢→快
    • ease-out :快→慢
    • ease-in-out :慢→快→慢
    • step-start :等同于steps(1,start)
    • step-end :等同于steps(1, end)
    • steps( integer, ?):接受两个参数的步进函数。

• • • • 第一个参数必须为正整数，指定函数的步数。
      • 第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end。

• • • cubic-bezie ( number, number, number, number):特定的贝塞尔曲线类型。

• • • • 在线制作贝赛尔曲线: cubic-bezier.com

2.复合属性

.inner {
	animation: 动画名 3s 0.5s linear 2 alternate-reverse forwards;
}

• 只设置一个时间表示duration，设置两个时间分别是: duration和delay，其他属性没有数量和顺序要求。
• animation-play-state一般单独使用。

3.动画与过渡的区别

• 动画不需要触发条件，过渡需要
• 动画可以通过关键帧更精确的设置元素状态