C

CSS动画简介

2025-06-07

CSS动画简介

你想用 CSS 制作动画吗？太好了，让我们开始吧😄！

大多数属性都可以进行动画处理：，，，，width等。在本教程中color，我们将重点介绍。opacitytransformtransform

使用 CSStransform我们可以旋转、缩放、倾斜或平移 html 元素。

尝试将鼠标悬停在忍者图像上（如果使用移动设备，则单击）：

尚无动画。代码如下：

<img class="ninja1" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">
<img class="ninja2" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">
<img class="ninja3" src="https://ljc-dev.github.io/fluffy-octo-adventure/nin.png">
Enter fullscreen mode Exit fullscreen mode 
img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.ninja1:hover {
  transform: translateY(50px);
}

.ninja2:hover {
  transform: scale(1.5);
}

.ninja3:hover {
  transform: rotate(45deg);
}
Enter fullscreen mode Exit fullscreen mode

悬停时：

  • translateY(50px)将ninja1向下移动50px。

  • scale(1.5)使ninja2增大 1.5 倍。

  • rotate(45deg)将ninja3顺时针旋转45 度。

过渡

现在让我们看看如何使用CSS 过渡来为这些变换添加动画。

过渡可使一个或多个属性的变化动起来。

我们添加一个 2s 的转换，transform如下所示：

.ninja1, .ninja2, .ninja3 {
  transition-property: transform;
  transition-duration: 2s;
}
Enter fullscreen mode Exit fullscreen mode

  • transition-property接受要添加过渡的属性的名称。我们可以使用关键字添加多个属性all，或者用逗号分隔每个属性，例如transition-property: transform, opacity

  • transition-duration设置过渡的持续时间。

我们也可以使用简写transition：

.ninja1, .ninja2, .ninja3 {
  transition: transform 2s;
}
Enter fullscreen mode Exit fullscreen mode

这段代码和上面的代码是一样的。

我们在悬停时获得动画：

我们可以用 来改变过渡的感觉transition-timing-function。

计时功能

默认为ease。我们来试试ease-in-out。

最后添加 1 秒延迟transition-delay。

.ninja1, .ninja2, .ninja3 {
  transition-property: transform;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 1s;
}
Enter fullscreen mode Exit fullscreen mode

或者

.ninja1, .ninja2, .ninja3 {
  transition: transform 2s ease-in-out 1s;
}
Enter fullscreen mode Exit fullscreen mode

如果您再次将鼠标悬停在忍者图像上，您会注意到动画以 1 秒的延迟开始。

@keyframes动画

在 CSS 中实现动画的另一种方法是使用animation和@keyframes规则。

@keyframes规则定义动画中的步骤：

@keyframes moveDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
  }
}
Enter fullscreen mode Exit fullscreen mode

有些人喜欢用关键字“equivalent fromand ”来代替“0%”和“100%” to。

您可以根据需要添加从 0 到 100% 的任意数量的关键帧，并根据需要设置任意数量的属性动画。

这个奇怪的动画绝对有效👍。

@keyframes weirdAnim {
  0% { transform: translateY(0); }
  11% { 
    width: 50px;
    background-color: green; 
    transform: rotate(90deg);
  }
  50% { height: 100px;}
  66% { transform: rotate(-720deg); }
  99% { 
    border-radius: 200px;
    background-color: black;
  }
  100% { 
    background-color: red;
  }
}
Enter fullscreen mode Exit fullscreen mode

要运行它，我们需要引用它的名称animation-name：

.ninja1{
  animation-name: weirdAnim;
}
Enter fullscreen mode Exit fullscreen mode

并给它一个持续时间animation-duration：

.ninja1{
  animation-name: weirdAnim;
  animation-duration: 5s;
}
Enter fullscreen mode Exit fullscreen mode

简写为animation：

.ninja1{
  animation: weirdAnim 5s;
}
Enter fullscreen mode Exit fullscreen mode

我们得到了这个怪物：


（单击“重新运行”可再次播放动画）

与过渡相同，我们可以使用 改变动画的感觉
animation-timing-function。并使用 添加延迟animation-delay。

.ninja1{
  animation-name: weirdAnim;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 1s;
}
Enter fullscreen mode Exit fullscreen mode

或者：

.ninja1{
  animation: weirdAnim 5s ease 1s;
}
Enter fullscreen mode Exit fullscreen mode

使用关键帧动画，我们还可以决定动画的运行次数animation-iteration-count。默认为1。设置为 则infinite动画无限运行。

我用它来制作infinite封面动画。以下是我的文本动画代码：

还有两个更高级的动画属性：

  • animation-direction：

    • normal（默认）从第一个关键帧开始。
    • reverse从最后一个关键帧开始。
    • alternate从第一个开始到最后一个，但如果动画重复，下一个动画将从最后一个到第一个。
    • alternate-reverse与替代相同，只是它从最后一个关键帧开始。（示例）

  • animation-fill-modeforwards。当我们想要在动画播放完毕后保留动画状态时，就设置它。

我们将把 kpop girl 图像向下滑动三次，并用 保持最后的位置forwards。

<img class="kpop" src="https://ljc-dev.github.io/fluffy-octo-adventure/kpop.png">
Enter fullscreen mode Exit fullscreen mode 
img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: contain;
}

@keyframes slideDown {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(75%);
  }
}

.kpop{
  animation-name: slideDown;
  animation-duration: 3s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
Enter fullscreen mode Exit fullscreen mode

或者：

.kpop{
  animation: slideDown 3s 3 alternate forwards;
}
Enter fullscreen mode Exit fullscreen mode

注意如何alternate使用 来改变第二次迭代的方向。因此，动画不是跳起来再滑下来，而是反向运行并向上滑动。

这就是过渡和关键帧动画的介绍的结尾。

使用简写时要注意的一点是不要混淆属性的顺序。你可以省略那些不需要更改的属性，但不要把持续时间放在动画名称前面。

以下是过渡和动画的正确属性顺序：

transition: property duration timing-function delay;

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

谢谢阅读！

我希望您现在对如何使用 CSS 制作动画有了更好的了解。

下面我发布了一些常见的 CSS 动画，其中一些是用 JS 实现的。如果您有任何疑问，请留言或在社交媒体上联系我👌。

编码愉快👋！

  • 按钮悬停时过渡不透明度和活动时缩放

  • 旋转器

  • 进度条动画

  • 菜单链接悬停在底线上

  • 使用淡入淡出的动画滚动到顶部

  • 汉堡下拉菜单

  • 汉堡滑动右侧菜单+叠加

  • 为那些好奇我是如何做到的的人发布封面（没有回应）

文章来源：https://dev.to/ljcdev/introduction-to-css-animation-4762
Devto 翻译
PREV
无障碍标签简介
NEXT
使用 JS 制作简单的汉堡菜单 - 初学者