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: 无限次播放
- <number>: 默认为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(状态)
每个动画定义中的属性值的顺序很重要：可以被解析为 <time> 的第一个值被分配给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关键词会被忽略
