CSS动画（animation）

CSS动画

什么是 CSS 动画？

• 动画使元素逐渐从一种样式变为另一种样式。
• 您可以随意更改任意数量的 CSS 属性。
• 如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
• 关键帧包含元素在特定时间所拥有的样式。

属性	描述
@ keyframes	动画规则
animation - name	命名动画规则
animation - duration	动画执行时长
animation - delay	动画延迟
animation - iteration - count	动画执行次数
animation - direction	规定动画是向前播放、向后播放还是交替播放
animation - timing - function	动画速度曲线
animation - fill - mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）
animation	动画属性简写
animation - play - state	规定动画是运行还是暂停

@keyframes规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 "example" 动画绑定到

元素。动画将持续 4 秒钟，同时将

元素的背景颜色从 "red" 逐渐改为 "yellow"：

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation-name属性（动画的名字）

animation-name写在@keyframes后面，有了动画名单才能取应用动画

animation-duration属性（动画时间）

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改

元素的背景颜色：

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation-delay属性（延迟动画）

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  /*动画延迟了两秒*/
  animation-delay: 2s;
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒一样

值	描述
int（数字）	写数字几就运行几次
infinite	无限的运行下去

animation-direction属性（反向或交替运行动画）

值	描述
normal	动画正常播放（向前）。默认值
reverse	动画以反方向播放（向后）
alternate	动画先向前播放，然后向后
alternate-reverse	动画先向后播放，然后向前

animation-timing-function属性（动画的速度曲线）

值	描述
ease	指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear	规定从开始到结束的速度相同的动画
ease - in	规定慢速开始的动画
ease - out	规定慢速结束的动画
ease - in -out	指定开始和结束较慢的动画
cubic - bezier(n, n, n, n)	运行您在三次贝塞尔函数中定义自己的值

animation-fill-mode属性（指定动画的填充模式）

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

具体实例看下面网站
https://www.w3school.com.cn/css/css3_animations.asp

animation-play-state 属性（规定动画是暂停还是运行）

值	描述
paused	规定动画已暂停
running	规定动画正在播放

animation-name属性（动画简写）

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

上面的代码可以简写为

div {
  animation: example 5s linear 2s infinite alternate;
}

这两代码表达的含义是一样的

参考网址

https://www.w3school.com.cn/css/css3_animations.asp