animation

一、认识

---

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

二、语法

---

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;

/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;

三、属性

---

3.1 animation-delay

**animation-delay**属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

语法

animation-delay = 
  [ <'animation-delay-start'> <'animation-delay-end'>? | <timeline-range-name> ]#  


animation-delay: 3s;
animation-delay: 2s, 4ms;

取值

• 0s(默认值): 代表动画在应用到元素上后立即开始执行

• 赋值: 定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始

• <time>: 从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒 (s) 和毫秒 (ms)。如果未设置单位，定义无效。

3.2 animation-direction

**animation-direction**属性指示动画是否反向播放

语法

animation-direction = 
  <single-animation-direction>#  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

取值

• normal: 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。

• alternate: 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代

• reverse: 反向运行动画，每周期结束动画由尾到头运行。

• alternate-reverse: 反向交替，反向开始交替。动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从 1 开始。

3.3 animation-duration

animation-duration 属性指定一个动画周期的时长

语法

animation-duration = 
  <time [0s,∞]>#  

animation-duration: 6s
animation-duration: 120ms
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms

取值

• 0s: 默认值为 0s，表示无动画。

• <time>: 一个动画周期的时长，单位为秒 (s) 或者毫秒 (ms)，无单位值无效。

3.4 animation-fill-mode

animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标

语法

animation-fill-mode = 
  <single-animation-fill-mode>#  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both       




/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

取值

• none: 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

• forwards: 目标将保留由执行期间遇到的最后一个关键帧 (en-US)计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值

• backwards: 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值

• both: 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

3.5 animation-iteration-count

animation-iteration-count 定义动画在结束前运行的次数 可以是 1 次 无限循环。

语法

/* 值为关键字 */
animation-iteration-count: infinite;

/* 值为数字 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/* 指定多个值 */
animation-iteration-count: 2, 0, infinite;

取值

• infinite: 无限循环播放动画。

• <number>: 动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

3.6 animation-name

animation-name 属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。

语法

animation-name = 
  [ none | <keyframes-name> ]#  

<keyframes-name> = 
  <custom-ident>  |
  <string>        



/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/* Multiple animations */
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset

取值

• none: 特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。

• IDENT: 标识动画的字符串，由大小写敏感的字母 a-z、数字 0-9、下划线 _ 和/或横线 - 组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。

3.7 animation-play-state

animation-play-state 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放

语法

animation-play-state = 
  <single-animation-play-state>#  

<single-animation-play-state> = 
  running  |
  paused   


/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;

取值

• running: 当前动画正在运行。

• paused: 当前动画已被停止。

3.8 animation-timing-function

animation-timing-function 属性定义 CSS 动画在每一动画周期中执行的节奏。可能值为一或多个 <timing-function> 。对于关键帧动画来说，timing function 作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。

语法

animation-timing-function = 
  <easing-function>#  

<easing-function> = 
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                                |
  step-end                                  |
  steps( <integer> [, <step-position> ]? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}  


/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

取值

• <timingfunction>: 每个 <timing-function> 代表了应用于动画的 timing function

  • linear: 动画以恒定速度运行。此关键词表示缓冲函数 cubic-bezier(0.0, 0.0, 1.0, 1.0)。

  • ease: 动画缓慢开始，然后突然加速，最后缓慢移向目标。此关键词表示缓冲函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)。它与 ease-in-out 类似，但它在开始时加速更快。

  • ease-in: 动画缓慢开始，然后逐渐加速直到结束，在结束点时突然停止。此关键词表示缓冲函数 cubic-bezier(0.42, 0.0, 1.0, 1.0)。

  • ease-in-out: 动画缓慢开始，然后加速，最后减速直至结束。此关键词表示缓冲函数 cubic-bezier(0.42, 0.0, 0.58, 1.0)。开始时，其表现与 ease-in 函数类似；结束时，与 ease-out 函数类似。

  • ease-out: 此动画突然开始，然后逐渐减速直至结束。此关键词表示缓冲函数 cubic-bezier(0.0, 0.0, 0.58, 1.0)。

  • cubic-bezier(x1, y1, x2, y2):

  • step-start: 此关键词表示 steps(1, jump-start) 或者 steps(1, start)

  • step-end: 此关键词表示 steps(1, jump-end) 或者 steps(1, end)

  • steps(number_of_steps, direction):

    • number_of_steps:

    • direction:

      • jump-start:

      • jump-end:

      • jump-both:

      • jump-none:

      • start:

      • end:

四、问题

---

4.1 transition 与 animation 的区别?

• transition: 过渡属性, 强调过渡。强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

• animation: 它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。