CSS 动画和 @Keyframes 属性(1)

📌 相关文章

📜 CSS 动画和 @Keyframes 属性(1)

📅 最后修改于: 2023-12-03 15:00:08.019000 🧑 作者: Mango

CSS 动画和 @Keyframes 属性

CSS 动画是 CSS3 增加的新特性，它允许开发者通过 CSS 属性来控制某些元素的动画。@keyframes 属性是用于定义动画序列的规则。

基础语法

CSS 动画

要使用 CSS 动画，我们需要使用 animation 属性。以下是 animation 属性的语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

name：动画名称，需要在 @keyframes 中定义。
duration：动画的时间长度。
timing-function：动画的缓动函数，可以是 ease, linear, ease-in, ease-out, ease-in-out 或者 cubic-bezier(n,n,n,n)。
delay：动画延迟时间。
iteration-count：动画重复次数，可以是数字或 infinite。
direction：动画方向，可以是 normal, reverse, alternate, alternate-reverse。
fill-mode：动画结束后元素的状态，可以是 none, forwards, backwards, both。
play-state：动画播放状态，可以是 running 或 paused。

@keyframes 属性

@keyframes 属性是用于定义动画序列的规则。以下是 @keyframes 属性的语法：

@keyframes name {
  from {css rules}
  to {css rules}
}

/* 或者 */

@keyframes name {
  0% {css rules}
  100% {css rules}
}

name：动画的名称。

实例

以下是一个简单的例子，演示如何使用 CSS 动画：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation: move 2s infinite;
      }

      @keyframes move {
        from {top: 0; left: 0;}
        to {top: 50px; left: 50px;}
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

在以上例子中，我们创建了一个 .box 的元素，它的背景颜色为红色。我们使用 animation 属性指定了 move 动画，并设置了它的时间长度为 2s，重复次数为无限次。我们还创建了一个 @keyframes 规则，用于指定动画从起始位置移动到目标位置的过程。

常见应用

循环动画

以下是一个实例，演示如何创建一个循环动画：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation: rotate 2s infinite;
      }

      @keyframes rotate {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

在以上例子中，我们创建了一个 .box 的元素，它的背景颜色为红色。我们使用 animation 属性指定了 rotate 动画，并设置了它的时间长度为 2s，重复次数为无限次。我们还创建了一个 @keyframes 规则，用于指定动画从起始位置旋转到结束位置的过程。

鼠标悬停动画

以下是一个实例，演示如何创建一个鼠标悬停动画：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation: pulse 1s infinite;
      }

      .box:hover {
        animation-play-state: paused;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.5);
        }
        100% {
          transform: scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

在以上例子中，我们创建了一个 .box 的元素，它的背景颜色为红色。我们使用 animation 属性指定了 pulse 动画，并设置了它的时间长度为 1s，重复次数为无限次。我们还创建了一个 @keyframes 规则，用于指定动画从起始位置缩放到最大值再缩放回原点的过程。当鼠标悬停在元素上时，我们设置动画的播放状态为暂停，这样就可以停止动画。