CSS3- animation-动画基础篇

CSS3动画 -- animation相关属性

1 animation-name: 动画名

指定应用一系列的动画, 每个名称代表一个由@keyframes定义的动画序列

属性值:

• none: 特殊关键字, 表示无关键帧
• name: 动画名称

2 animation-duration: 完成时间

指定一个动画周期的时长, 默认值为0, 表示无动画

属性值:

• time: 时间, 单位为s 或者 ms, 无单位值无效, 不能为负值

3 animation-timing-function: 执行速度

定义动画在每一个动画周期中执行的节奏

属性值:

• linear 动画从头到尾的速度是相同的
• ease 默认。动画以低速开始，然后加快，在结束前变慢
• ease-in 动画以低速开始
• ease-out 动画以低速结束
• ease-in-out 动画以低速开始和结束
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4 animation-fill-mode: 在执行之前和之后如何将样式应用于其目标

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

属性值:

• none 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值
• forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
• backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。
• both 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

5 animation-delay: 动画延迟时间

定义动画于何时开始, 即从动画应用在元素上到动画开始的这段时间的长度

允许负值, 定义负值会让动画立即开始. 但是会在它的动画序列中某位置开始。 例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始

如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。

属性值:

• time: 秒(s) 或 毫秒(ms), 未设置单位, 定义无效值

6 animation-iteration-count: 执行次数

定义动画的执行次数

属性值:

• infinite: 无限次播放
• : 默认为1, 可以用小数定义循环, 来播放动画周期的一部分, 不允许为负值. 例如: 0.5 表示播放到动画周期的一半

7 animation-direction: 是否反向播放

定义动画是否反向播放

属性值:

• normal: 默认值, 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，
• reverse: 动画反向播放
• alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
• alternate-reverse 反向交替， 反向开始交替 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

8 animation-play-state: 是否运行 或 暂停

定义一个动画是否运行 或者 暂停. 可以通过查询它来确定动画是否在运行, 也可以通过设置它来暂停动画 或 播放动画

恢复一个已暂停的动画, 将从它开始暂停的时候, 而不是从动画序列的起点开始在动画

属性值:

• running: 当前动画正在运行
• paused: 当前动画以被停止

9 animation: 动画属性

语法:

animation: name(名称) duration(完成时间) timing-function(速度) delay(延迟时间) iteration-count(次数) direction(是否反向播放) fill-mode(开始和结束的样式) play-state(状态)

每个动画定义中的属性值的顺序很重要：可以被解析为 的第一个值被分配给animation-duration， 第二个分配给 animation-delay。

每个动画定义中的值的顺序，对于区分 animation-name 值与其他关键字也很重要。解析时，对于除 animation-name 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。此外，在序列化时，animation-name 与以及其他属性值做区分等情况下，必须输出其他属性的默认值

10 @keyframes: 定义动画关键帧

通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。

• 名称规则

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

• 单位

  可以使用百分比值 或者 from(开始), to(结束)关键字

• 让关键帧序列生效

  如果一个关键帧规则中没有指定动画的开始 或 结束状态(没有定义0%/from 和 100%/to), 将使用元素的现有样式作为起始/结束状态. 这可以用来从初始状态开始元素动画，最终返回初始状态。

  如果使用了不能用作动画的属性, 那么这些属性会被忽略掉, 支持的属性仍然是有效的

• 重复定义(针对整体而言)

  如果多个关键帧使用同一个名称(即动画名称), 以最后一个为主, 不存在层叠样式的情况

  如果一个@keyframes里的关键帧的百分比存在重复的情况, 以最后一次定义的关键帧为准. 不存在层叠样式的情况, 即使多个关键帧设置相同的百分值也不会全部执行

  /* 此动画无效, 全部无效 */
  @keyframes identifier {
    0% { top: 0; left: 0px}
    100% { top: 0; left: 30px;}
  }
  @keyframes identifier {
    0% { top: 0; left: 20px}
    50% { top: 10px, left: 30px }
    100% { top: 0; left: 50px;}
  }
  

• 当关键帧被重复定义

  如果某一个关键帧出现了重复的定义，且重复的关键帧中的css属性值不同，以最后一次定义的属性为准。 => 针对属性, 重复定义时, 同属性最后一个定义的覆盖前面的属性

  @keyframes identifier {
    0% { top: 0; left: 0px}
    /* top属性无效, left属性生效*/ 
    50% { top: 30px; left: 20px; }
    50% { top: 10px; }
    100% { top: 0; left: 30px;}
  }
  

• 属性个数不定

  如果一个关键帧中没有出现其他关键帧中的属性, 那么这个属性将使用插值(不能使用插值的属性除外, 这些属性会被忽略掉).

  @keyframes identifier {
    0% { top: 0; left: 0; }
    30% { top: 50px; }
    68%, 72% { left: 50px; }
    100% { top: 100px; left: 100%; }
  }
  

• 关键帧中的!import关键词

  !import关键词会被忽略