CSS动画化简化！

CSS 动画是一个模块，它允许你为元素添加动画效果，使元素从一种样式变为另一种样式。要使用 CSS 动画，我们需要使用@keyframes……

在讨论动画之前，我们先来创建两个框：

.parent{}这将创建一个盒子
.child{}这将在父元素内部创建一个小盒子。

注意：容器类的作用是使盒子居中，以便于查看。

<div class="container">
    <div class="parent">
      <div class="child"></div>
    </div>
</div>

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background-color: rgb(21, 214, 124);
  height: 400px;
  width: 400px;
}

.child {
  background-color: red;
  height: 50%;
  width: 50%;
}

过渡属性

让我们把盒子从左移动到右，为此我们不需要使用动画和关键帧属性，因为盒子从左移动到右的动画非常简单，只需一步即可完成。因为物体是从左向右移动的，就是这样。

所以这就是我们使用 transition 属性的原因。


.child {
  background-color: red;
  height: 50%;
  width: 50%;
  transition: transform ease-in 1s;
}

.child:hover {
  transform: translateX(100%);
}

这样，当您将鼠标悬停在子框上时，子框就会从左侧移动到右侧。

转换属性的语法如下：

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

过渡属性：用于指定要更改的具体属性。
过渡持续时间：这决定了过渡的持续时间。
过渡时间函数：用于定义一个函数，该函数描述过渡动画在其持续时间内的进行方式，允许过渡动画在进行过程中改变速度。了解更多信息，请点击此处。
转换持续时间：用于定义延迟转换开始的时间长度。

但如果我们想让子元素围绕父元素旋转呢？
这时，属性就派上用场了animation。

动画也有很多属性，但我们可以使用简写形式animation来包含所有属性。那么，让我们开始吧：

.child {
  background-color: red;
  height: 50%;
  width: 50%;
}

.child:hover {
  animation: left-to-right 1s ease-in forwards;
}

@keyframes left-to-right {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateY(100%);
  }

  60% {
    transform: translateX(100%) translateY(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

首先你会看到动画的名称是“从左到右”，然后我在关键帧中使用了相同的名称。这是为了确定动画将应用于特定的关键帧。
其次，你会发现 forwards，它实际上来自animation-fill-mode属性，该属性实际上表示你必须在 100% 时停止动画，否则动画将执行的操作是，当它达到 100% 时，动画将重置，盒子将再次回到 0%。

动画的子属性

animation-name：声明要操作的 @keyframes at 规则的名称。
动画持续时间：动画完成一个周期所需的时间。
动画计时功能：建立预设的加速曲线，例如缓动或线性。
动画延迟：元素加载完毕到动画序列开始之间的时间（精彩示例）。
animation-direction：设置动画循环结束后动画的方向。其默认值在每次循环时重置。
animation-iteration-count：动画应执行的次数。
animation-fill-mode：设置动画开始前/结束后应用哪些值。例如，您可以设置动画的最后状态保持在屏幕上，或者设置动画开始时切换回之前的状态。
animation-play-state：暂停/播放动画。