animation CSS3的动画

创建动画。
将其连接到必须设置动画的元素，并指示所需的功能。

动画是一组关键帧，它们存储在css中，我们先看一段简单的动画代码段：

@keyframes test-animation {
  0% {
   width: 50px;
  }
  100% {
    width: 150px;
  }
}

让我们整理一下：

关键字“ @keyframes”指示动画本身。

接下来动画的命名，“ test-animation”。

花括号{ }包含关键帧列表。在这种情况下，它是开始帧0％和结束帧100％。同样，开始和结束帧也可以写为关键字“ from ”和“ to”。

采用from..to..改写上面的代码,可以这样写：

@keyframes test-animation {
    from {
      width: 50px;
    }
    30% {
      width: 99px;
    }
    60.8% {
       width: 120px;
    }
    to {
       width: 150px;
    }
}

请注意，如果未指定起始帧（“ from ”，“ 0％”）或结束帧（“ to”，“ 100％”），浏览器将为他们设置动画功能的估算值，就像动画未应用。

将上面动画的代码应用到指定元素是通过两个命令完成的：

element {
animation-name: test-animation;
animation-duration: 2s;
}

规则:

“test-animation”设置创建的动画“ @keyframes”的名称。** “animation-duration”指出动画将播放多少秒。可以以秒（（3s，65s，.4s））或毫秒（（300ms，1000ms））表示**。

您可以对关键帧进行分组：

@keyframes animation-name {
  0%, 35% {
   width: 100px;
  }
  100% {
    width:200px;
  }
}

可以为一个元素设置很少的动画，其名称和参数应按设置顺序编写：

element {
    animation-name: animation-1, animation-2;
    animation-duration: 2s, 4s;
 }

更多动画属性设置

animation-delay：功能可识别播放动画之前的延迟，以秒或毫秒为单位设置：

element {
    animation-name: animation-1;
    animation-duration: 2s;
    animation-delay: 5s; // Before starting this animation, 5 sec will pass.
 }

animation-iteration-count：动画播放次数。我们可以设置0、1、2、3…等中的任何正值，或者为无限重复设置“无限 ”。

element {
   animation-name: animation-1;
   animation-duration: 2s;
   animation-delay: 5s;
   animation-iteration-count: 3; //this animation plays 3 times
 }

animation-fill-mode：可标识元素在动画开始之前和完成之后处于哪种状态。

animation-fill-mode：forwards：动画完成后，元素状态将对应于最后一帧。

animation-fill-mode：backwards：动画完成后，元素状态将对应于第一帧。

animation-fill-mode：both：动画开始之前，元素状态将与第一帧相对应，而在其完成之后将与最后一个帧相对应。

animation-play-state：动画的启动与暂停。该功能仅使用2个值：“ running ”或“ paused”。

animation-direction ：动画方向。我们可以管理动画播放的方向。它的参数可以取几个值：

animation-direction：normal;动画播放，这是动画的通常方向。

animation-direction：reverse;动画反向播放。

animation-direction: alternate;正常情况下，即使动画回放也将以相反的方向进行，而奇数。

animation-direction: alternate-reverse;动画重播将以正常方向进行，奇数回放将以相反方向进行。

animation-timing-function：动画时间函数，允许设置特殊功能，该功能负责动画重播速度。常用的函数名称有ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end.

这种时间函数可以自己创建：贝塞尔曲线cubic-bezier。

`animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);`

采用四个参数，并基于它们建立动画过程中的值分布曲线。可以在这里设置函数：

<u style="text-decoration: none; border-bottom: 1px dashed grey;">https://cubic-bezier.com/#.17,.67,.68,.82</u>

最后，可以借助steps (amount of steps, direction)功能将动画转换为一组离散值，其中，其自变量的作用取决于其步数和方向的数量（可以取值）start或end。在下面的示例中，动画将包含7个步骤，其中的最后一步将在动画完成之前完成：

元素{ 
   animation-timing-function：steps（7，end）; 
}

animation CSS3的动画

更多动画属性设置

推荐阅读更多精彩内容