CSS 动画

Posted on by

我们已经讨论过CSS 过渡，但动画略有不同。动画可以独立于状态或类的变化，所以我们可以立即开始动画。我们还可以控制方向，以及对关键帧的精细控制。

我们还将在本文中介绍一种新的语法，即@CSS 中使用的语法。

动画标签#

动画标签看起来很像我们之前介绍的过渡标签。有一个标签是许多其他标签的简写。语法如下所示：

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

正如您所料，我们不需要所有这些属性，实际上大多数实现只使用animation-name,animation-timing-function和animation-duration.

div {
    animation: myAnimation 1s linear infinite forwards 0.5s normal running;
    /* This can be separated out as separate properties.. i.e. */
    animation-name: myAnimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    animation-direction: normal;
    animation-play-state: playing;
}

使用较少属性的典型实现：

div {
    animation: myAnimation 1s linear infinite forwards;
}

每个标签的含义是什么？

  • animation-name– 我们要播放的动画的名称 – 我们稍后会讲到。
  • animation-duration– 动画应该多长，通常以秒为单位，即2s
  • animation-timing-function– 计时功能的关键字或曲线。它通常是缓动、线性、缓入、缓出或缓入。
  • animation-iteration-count– 我们将运行动画的次数。可以是任意数字，也可以是无限的。
  • animation-fill-mode– 动画的最终状态。如果转发动画在最后一帧结束。反之亦然。_
  • animation-delay– 动画开始前的延迟，通常以秒为单位，即2s
  • animation-direction– 动画是从头到尾，还是从头到尾。可以是normal用于前进，reverse用于后退，alternate用于前进和后退，或者alternate-reverse用于反复前进和前进。
  • animation-play-state– 动画是否正在播放。它默认运行，但可以设置为paused。

动画名称#

如我们所见，我们过去常常animation-name引用特定的动画名称。那是从哪里来的？好吧，我们将其定义为关键帧的一部分。我们@用来确定关键帧。

我们首先调用@keyframes我们的动画名称。然后我们可以使用百分比来调用关键帧，即 0% 是在动画的开头，而 100% 是在动画的结尾：

div {
    animation: myAnimation 1s linear infinite forwards alternate;
    position: relative;
    width: 150px;
    height: 150px;
    background: orange;
    border-radius: 1000px;
}
@keyframes myAnimation {
    0% {
        left: 0px;
    } 
    20% {
        left: -20px;
    }
    40% {
        left: 0px;
    }
    100% {
        left: 200px;
    }
}

填充模式#

填充模式是一个看起来令人困惑的属性，但它相当简单（请原谅双关语）。如果设置为向前，则使用最后一个关键帧，但如果设置为向后（默认），动画将在第一帧结束。

将鼠标悬停在这些示例上：

如您所见，将鼠标悬停在此示例上时，向前的示例在最后一帧结束，而向后的动画在第一帧结束。向后前锋

To and from#

如果您的动画稍微简单一点，您还可以使用 to 和 from 而不是百分比。这里，from 指 0%，to 指 100%：

@keyframes myAnimation {
    from {
        left: 0;
    }
    to {
        left: 200px;
    }
}

计时功能#

这里的计时功能与转换中的功能完全相同。所以我们可以用animation-timing-function其中任何一个替换。

推荐阅读：