css动画-animation各个属性详解
css动画-animation各个属性详解
原⽂链接：
css3的 animation 很容易就能实现各种酷炫的动画，虽然看到别⼈的成果图会觉得很难，但是如果掌握好各种动画属性，做好酷炫吊炸天的动画都不在话下，好，切⼊正题。
⼀、动画属性
动画属性包括：
①animation-name
②animation-duration
③animation-timing-function
④animation-delay
⑤animation-iteration-count
⑥animation-direction
⑦animation-fill-mode
⑧animation-play-state
属性详解
1、animation-name：指定要绑定到选择器的关键帧的名称。
2、animation-duration：定义动画完成⼀个周期需要多少秒或毫秒
3、animation-timing-function：指定动画将如何完成⼀个周期。
值说明
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
cubic-
bezier(n,n,n,n)
在 cubic-bezier 函数中⾃⼰的值。可能的值是从 0 到 1 的数值。
step-start在变化过程中，都是以下⼀帧的显⽰效果来填充间隔动画
step-end在变化过程中，都是以上⼀帧的显⽰效果来填充间隔动画
steps()可传⼊两个参数，第⼀个是⼤于0的整数，将动画等分成指定数⽬的⼩间隔动画，根据第⼆个参数来决定显⽰效果。第⼆个参数设置后和step-start，step-end同义，在分成的⼩间隔动画中判断显⽰效果。
关于cubic-bezier(n,n,n,n):
1. cubic-bezier(n,n,n,n)称为三次贝塞尔曲线，速度曲线。
2. cubic-bezier(n,n,n,n)韩庚吴昕
3. ⼩球
我不知道这个cubic-bezier曲线是怎么算出来的，难道是要靠⾃⼰试出来的嘛，不知道有没有⼈知道怎么算出来的。
（4个⽅块背景颜⾊变化）
demo解析：柯昱名照片
①step-start：20%(background: green;)到60%(background: blue;)之间，显⽰的是60%的效果(background: blue;)
②step-end：与step-start相反，20%(background: green;)到60%(background: blue;)之间，显⽰的是20%的效果(background: green;)
③steps(1, start) 等于step-start，steps(1,end)等于step-end
④steps函数的⼯作机制：
4、animation-delay：定义动画什么时候开始。
属性解析：
1. 单位可以是秒（s）或毫秒（ms）。
2. 单位可以是负值，-2s表⽰动画⽴马开始，但跳过 2 秒进⼊动画，即前2秒的动画不执⾏，直接跳过前2秒进⼊动画。
演⽰DEMO：
1.
demo解析：
①设置同样的动画，通过animation为负值来实现不同时间段的线条的长度。
②效果⽰意：
⼀次动画1.2s，分解为12个阶段，每个阶段0.1秒。每个阶段的第3秒线拉长。
line1是从0进⼊动画。
line2是跳过前11个阶段，即直接从11进⼊动画。
依次类推…
甘露醇的作用与功效
③写5个div时，连着写，然后⾃⼰设置margin，⼀⽅⾯避免代码压缩后各线条之间没有空隙，另⼀⽅⾯避免⾃⼰不知道5根线的总宽
度。
2.
demo解析：
①如果没有steps(8)，图⽚会从第⼀⾏字直接跳到最后⼀⾏，中间的6⾏不会出现。
5、animation-iteration-count ：定义动画应该播放多少次。
值说明
n⼀个数字，定义应该播放多少次动画
infinite指定动画应该播放⽆限次（永远）
6、animation-direction：定义是否循环交替反向播放动画。
值说明
审计学就业前景normal默认值。动画按正常播放。
reverse动画反向播放。
alternate动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial设置该属性为它的默认值。
inherit从⽗元素继承该属性。
值说明
6.1 如果动画被设置为只播放⼀次，该属性将不起作⽤。
6.2 动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性可以重写该⾏为。
7、animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有⼀个延迟未开始播放时），要应⽤到元素的样式。
值说明
none默认值。动画在动画执⾏之前和之后不会应⽤任何样式到⽬标元素。
forwards在动画结束后（由 animation-iteration-count 决定），动画将应⽤该属性值。
backwards 动画将应⽤在 animation-delay 定义期间启动动画的第⼀次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-
reverse” 时）。
both动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个⽅向上扩展动画属性。
initial设置该属性为它的默认值。
inherit从⽗元素继承该属性。
解析：
何晟铭个人资料1. 默认情况下，CSS 动画在第⼀个关键帧播放完之前不会影响元素，在最后⼀个关键帧完成后停⽌影响元素。animation-fill-mode 属
性可重写该⾏为。
2. forwads表⽰让动画停留在结束状态，即停留在最后⼀帧。
3. backwords：
当 animation-direction 为 “normal” 或 “alternate” 时，回到第⼀帧。
当 animation-direction 为 “reverse” 或 “alternate-reverse” 时，停留在最后⼀帧。
8、animation-play-state：指定动画是否正在运⾏或已暂停。
值说明
paused指定暂停动画。
running指定正在运⾏的动画。
8.1 在JavaScript中使⽤此属性在⼀个周期中暂停动画。
8.2 线条⿏标悬停开始
⼆、动画相关
1、animation的简写（即上述属性的介绍顺序）
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
具体化可以记成⼀下形式：
animation:myAnim 1s linear 1s infinite alternate both running;
2、keyframes：定义动画规则，关键帧。
值说明
animationname必需的。定义animation的名称。
keyframes-selector必需的。动画持续时间的百分⽐。
css-styles必需的。⼀个或多个合法的CSS样式属性
具体格式：
1. 指定的变化时发⽣时使⽤％，或关键字"from"和"to"，这是和0％到100％相同。以下两段代码效果相同。
@keyframes myAnim{
from{background: #f00;}
春季健康知识
50%{background: #0f0;}
to{background: yellowgreen;}
}
@keyframes myAnim{
0%{background: #f00;}
50%{background: #0f0;}
100%{background: yellowgreen;}
}
2. 如果省略某个状态，浏览器会⾃动推算中间状态。但是，为了获得最佳的浏览器⽀持，应该始终定义0％和100％的选择器。
@keyframes rainbow{
50%{background: orange }
to{background: yellowgreen }
}
@keyframes rainbow{
to{background: yellowgreen }
}
3. 可以将多个状态写在⼀⾏。
@keyframes myAnim{
0%，100%{background: #f00;}
50%{background: #0f0;
}
3、浏览器前缀
IE 10和Firefox（>= 16）⽀持没有前缀的animation，firefox（<16）使⽤-moz-前缀，因为现在firefox的版本也都不低，所以firefox 都直接使⽤没有前缀的animation。
⽽chrome，safari，opera不⽀持，所以必须使⽤webkit前缀。
使⽤⽰例如下：