CSS动画，比您想象的要容易。-DEV365 开发者社区

有时我们想制作动画以获得更好的用户体验。有很多工具，用于制作动画的软件包。有时我们需要了解JavaScript或Flash或其他第三方软件包来制作动画。

同时，CSS为我们提供了制作出色动画的简便方法。在这里，我们将尝试了解它。

基本上，我们将在不使用JavaScript或其他第三方库的情况下对HTML元素进行动画。

使用CSS动画，我们可以为一个元素从一种样式变为另一种风格，我们可以根据需要更改CSS属性。

属性：

@keyframes
动画名称
动画效力
动画 - 泰雷
动画列表计数
动画方向
动画 - 定时功能
动画填充模式

@keyframes
通过将CSS样式放入@KeyFrames中，我们可以定义动画，并且在某个时候将逐渐从现在的样式变为新样式。

<!DOCTYPE html>
<html>
<head>
<style> 
@keyframes example {
  from {background-color: green;}
  to {background-color: red;}
}

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  margin-bottom: 10px;
  border-radius: 50%
}


</style>
</head>
<body>

<div class="circle"></div>
<div class="circle"></div>

</body>
</html>

上面的代码向我们展示了@keyframes如何与我们的样式一起使用。将上述代码放入编辑器或在线编辑器中，例如Jsfiddle，然后查看更改。

首先，“圆”类是“绿色”颜色，然后将变为“红色”颜色。

在@keyframes中，我们已经提供了从“和”属性提供的。我们可以用百分比替换它们。例如，“ 0％”，“ 25％”，“ 50％”，“ 75”和“ 100％”。

尝试以下代码查看更改，我正在使用Jsfiddle

<!DOCTYPE html>
<html>
<head>
<style> 
@keyframes example {
  0%   {background-color: green;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: red;}
}

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  margin-bottom: 10px;
  border-radius: 50%
}


</style>
</head>
<body>

<div class="circle"></div>
<div class="circle"></div>

</body>
</html>

在上面的代码中，我们可以看到圆的颜色将更改为绿色，黄色，蓝色和红色。持续时间为4s。

动画名称：
此属性用于指示@keyframe名称。

@keyframes example { /* name "example" */
}

.circle {
  animation-name: example; /* indicates @keyframes name */
}

动画效果：
这是强制性的财产。它定义了完成动画所需的时间。它的默认值为0，因此没有定义，不会发生动画。

动画 - 赛：
此属性将确保您的动画将被延迟开始。

使用以下代码更新“ Circle”类以查看更改，

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s; /* animation will be deloayed for 2 seconds */
  margin-bottom: 10px;
  border-radius: 50%
}

如果我们使用“ -2”，

也允许负值，那么它将像播放2秒一样开始。

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
  margin-bottom: 10px;
  border-radius: 50%
}

我们可以在@keyframes内部的每个时间段内添加多个样式属性。下面的代码将在每个圆的位置并肩上更改颜色。

<!DOCTYPE html>
<html>
<head>
<style> 
.circle{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
  border-radius: 50%
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

动画列表计数：
它将定义动画应运行的次数。
下面的代码显示我们将在停止之前运行3次动画。

<!DOCTYPE html>
<html>
<head>
<style> 
.circle{
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
  border-radius: 50%
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

如果我们想要该动画永远存在，那么我们需要使用“无限”。

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  border-radius: 50%
}

动画方向：
它将定义动画会向后或向前播放。以下是动画方向的值

- 正常 - 播放正常（前向）。这是默认的。
- 反向 - 在反向方向（向后）播放
- 替代 - 首先踢球，然后向后
- 替代反向 - 首先向后播放，然后向前

.circle {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse; 
  border-radius: 50%;
}

动画 - 定时函数
它指定动画的速度曲线。

轻松 - 指定一个动画速度缓慢，然后快速，然后慢慢结束（这是默认）
线性 - 指定从头到尾相同速度的动画
轻松 - 指定速度缓慢的动画
轻松 - 指定慢末端的动画
轻松入门 - 指定启动和结束缓慢的动画

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s infinite;
}

.circle-1 {animation-timing-function: linear;}
.circle-2 {animation-timing-function: ease;}
.circle-3 {animation-timing-function: ease-in;}
.circle-4 {animation-timing-function: ease-out;}
.circle-5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<div class="circle-1">linear</div>
<div class="circle-2">ease</div>
<div class="circle-3">ease-in</div>
<div class="circle-4">ease-out</div>
<div class="circle-5">ease-in-out</div>

</body>
</html>

动画填充模式：
当动画不播放动画时，它指定了目标元素的样式。动画填充模式的值

无 - 默认值。动画在执行之前或之后不会将任何样式应用于该元素
forward-元素将保留由最后一个密钥帧设置的样式值（取决于动画方向和动画 - 列表计数）
向后 - 该元素将获得第一个密钥帧设置的样式值（取决于动画方向），并在动画 - 列表期间保留此值
两者 - 动画将遵循前向和向后的规则，将动画属性扩展到两个方向

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
  border-radius: 50%
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<div class="circle-1"></div>


</body>
</html>

就是这样。见ya。