css animation组成及动画的语法

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。Animations由两部分组成：css动画的配置，以及一系列的 keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作

属性 描述
animation-name 指定由 @keyframes 描述的关键帧名称
animation-duration 设置动画一个周期的时长
animation-delay 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间
animation-direction 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行
animation-iteration-count 设置动画重复次数， 可以指定 infinite 无限次重复动画
animation-play-state 允许暂停和恢复动画
animation-timing-function 设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化
animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）
animation 是一个复合属性，包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state共8个子属性

keyframes （规则的设定）

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
注意：要使动画生效，必须将动画绑定到某个元素。
语法：
  @keyframes animationname {keyframes-selector {css-styles;}}

  • keyframes-selector必需的。动画持续时间的百分比。
    • 合法值：0-100% / from (和0%相同) to (和100%相同)
      注意：您可以用一个动画keyframes-selectors。
  • css-styles 必需的。一个或多个合法的CSS样式属性

使用 from to

1
2
3
4
5
6
7
8
@keyframes test {
 from {
   opacity: 1;
 }
 to {
   opacity: 0;
 }
}

使用百分比

1
2
3
4
5
6
7
8
9
@keyframes test {
 0% {
   opacity: 1;
 }
 100% {
   opacity: 0;
 }
}

当然，当我们的关键帧不止 2 帧的时，更推荐使用百分比定义的方式
除此之外，当动画的起始帧等同于 CSS 规则中赋予的值并且没有设定 animation-fill-mode，0% 和 from 这一帧是可以删除的

animation-name （keyframes名称）

规定需要绑定到选择器的 keyframe 名称
语法:
  animation-name: keyframename|none;

  • keyframename 指定要绑定到选择器的关键帧的名称
  • none 指定有没有动画（可用于覆盖从级联的动画）

animation-duration （播放周期时长）

定义动画完成一个周期需要多少秒或毫秒。值必须是正数或零，单位是必需的。
如果未提供值，则使用默认值 0s，此时动画仍会执行（会触发 animationStart 和 animationEnd 事件）。如果 animation-duration 为 0s 时，动画是否可见取决于 animation-fill-mode 的值，如下所述：

  • 如果 animation-fill-mode 设置为 backwards 或者 both，则在 animation-delay 倒计时期间将显示由 animation-direction 定义的动画的第一帧。
  • 如果 animation-fill-mode 设置为 forwards 或者 both，在 animation-delay 结束后，将显示由 animation-direction 定义的动画的最后一帧。
  • 如果 animation-fill-mode 设置为 none，动画将不会有任何的视觉效果。
    备注： 负值是无效的，会导致声明被忽略。一些早期的、有前缀的实现可能将其视为与 0s 相同。

语法：
  animation-duration: time;

  • time 指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。

animation-timing-function （动画速度类型）

指定动画将如何完成一个周期。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
语法:
  animation-timing-function: value;
animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：

值 描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps(int,start|end) 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：
start：表示直接开始。
end：默认值，表示戛然而止。
step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

eg:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@keyframes test2{
       0%{
           background-color: blue;
       }
       25%{
           background-color: rgb(46, 211, 31);
       } 
       50%{
           background-color: rgb(228, 236, 20);
       } 
       75% {
           background-color: rgb(246, 164, 12);
       }
       100%{
           background-color: rgb(246, 12, 227);
       } 
   }
  .box .innerbox2{
       width: 100px;
       height: 100px;
       position: relative;
       left: 0px;
       /* background-color: bisque; */
       /* animation-name: test2;
       animation-duration:50s;
       animation-delay :0s; */
       /* animation-direction:normal; */
       /* animation-iteration-count:infinite; */
       /* animation-fill-mode:none; */
       /* animation-timing-function: steps(5,end); */

       /* 位置可调 如果有执行时间和延迟时间那么第一个为执行时间第二个为延迟时间   */
       animation: 5s 20s  test2  infinite steps(5,end);
       
   }
 <div class="innerbox2"></div>

注意： steps(5,end);

step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 25% 直接就显示了绿色
step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，所以75% 到 100% 显示的为橙色

animation-delay （延时）

设置动画延时，定义动画什么时候开始。值单位可以是秒（s）或毫秒（ms）。
语法：
  animation-delay: time;

  • time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div {
 width: 100px;
 height: 100px;
 background: #000;
 animation-name: test;
 animation-duration: 2s;
}

div:nth-child(2) {
 animation-delay: 1s;
}

@keyframes test {
 0% {
   transform: translate(0);
 }
 100% {
   transform: translate(200px);
 }
}

animation-direction （播放方式）

定义是否循环交替反向播放动画。
CSS 语法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

值 描述
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

animation-iteration-count （播放次数）

定义动画应该播放多少次。
语法:
animation-iteration-count: value;

值 描述
n 一个数字，定义应该播放多少次动画
infinite 指定动画应该播放无限次（永远）

animation-fill-mode (定帧)

animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
CSS 语法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;

值 描述
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

animation-play-state

指定动画是否正在运行或已暂停。
语法:
animation-play-state: paused|running;

值 描述
paused 指定暂停动画
running 指定正在运行的动画