#yyds干货盘点#一个方便的小系统，用于 CSS 中的动画入口

我喜欢让网站感觉不仅仅是一个静态文档的小改动。如果网页内容不只是在页面加载时“出现”，而是弹出、滑动、褪色或旋转到位怎么办？说这样的动作总是有用的可能有点牵强，但在某些情况下，它们可以引起对某些元素的注意，加强哪些元素彼此不同，甚至表明状态发生了变化。所以，它们也不是完全没用。

因此，我将一组 CSS 实用程序放在一起，用于在元素进入视图时为其设置动画。而且，是的，这个纯 CSS。它不仅有各种各样的动画和变化，而且还支持交错这些动画，几乎就像一种创建场景的方式。

你知道，像这样的东西：

这实际上只是一个更高级的版本：

我们将首先回顾我用来创建动画的基础，然后进入我添加的小花样，如何交错动画，然后如何将它们应用于 HTML 元素，然后再看看如何完成所有这些同时尊重用户减少的运动偏好。

基础知识

核心思想包括添加一个简单的​​CSS​​​ ​​@keyframes动画​​​，该​​动画​​​应用于我们想要在页面加载时设置动画的任何内容。让我们让一个元素淡入，从​​opacity: 0​​​到​​opacity: 1​​半秒：

.animate {
  animation-duration: 0.5s;
  animation-name: animate-fade;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}
@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

​​animation-delay​​​还要注意，那里有半秒的时间，让网站的其余部分有一点时间先加载。该​​animation-fill-mode: backwards​​是有，以确保我们的动画的初始状态是在页面加载活跃。没有这个，我们的动画元素就会在我们想要的时候弹出。

如果我们很懒惰，我们可以收工，就这样吧。但是，CSS-Tricks 的读者当然不是懒惰的，所以让我们看看如何使用系统使这类事情变得更好。

更高级的动画

使用各种动画比只使用一两个动画要有趣得多。我们甚至不需要创建一堆新的​​@keyframes​​来制作更多的动画。创建新类非常简单，我们只需要更改动画使用的帧，同时保持所有时间相同。

那里有几乎无限数量的 CSS 动画。（见​​animate.style​​​的巨大集合。）​​CSS滤镜​​​一样​​blur()​​​，​​brightness()​​​和​​saturate()​​​当然​​CSS变换​​也可以用来创造更多的变化。

但是现在，让我们从一个新的动画类开始，该类使用 CSS 变换使元素“弹出”到位。

.animate.pop {
  animation-duration: 0.5s;
  animation-name: animate-pop;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
}
@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

我投入了一点​​cubic-bezier()​​​时间曲线，由 Lea Verou 必不可少的​​cubic-bezier.com​​提供，以获得弹性反弹。

添加延迟

我们可以做得更好！例如，我们可以为元素设置动画，使它们在不同的时间进入。这会创建一个交错，无需复杂的代码量即可实现复杂的运动。

这个动画在三个页面元素上使用 CSS 过滤器、CSS 变换，每个元素交错大约十分之一秒，感觉非常好：

我们所做的只是为每个元素创建一个新类，当元素开始动画时，这些元素使用​​animation-delay​​间隔仅十分之一秒的值。

.delay-1 { animation-delay: 0.6s; }  
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 0.8s; }

其他一切都完全一样。请记住，我们的基本延迟是​​0.5s​​，所以这些辅助类从那里开始计数。

尊重无障碍偏好

让我们成为优秀的网络公民并为启用了​​减少运动首选项​​设置的用户删除我们的动画：

@media screen and (prefers-reduced-motion: reduce) {
  .animate { animation: none !important; }
}

这样，动画永远不会加载，元素像往常一样进入视图。然而，在这里值得提醒的是，​​“减少”运动并不总是意味着“移除”运动​​。

将动画应用到 HTML 元素

到目前为止，我们已经查看了一个基本动画以及一个稍微更高级的动画，我们能够通过包含在新类中的交错动画延迟使之更高级。我们还看到了如何同时尊重用户的动作偏好。

即使有展示概念的现场演示，我们还没有真正了解如何将我们的工作应用于 HTML。很酷的是，我们可以在几乎任何元素上使用它，无论是 div、span、文章、标题、部分、表格、表单……你明白了。

这就是我们要做的。我们想在三个 HTML 元素上使用我们的动画系统，其中每个元素都有三个类。我们可以将所有动画代码硬编码到元素本身，但将其拆分为我们提供了一个可以重用的小动画系统。

• ​​.animate​​：这是包含我们核心动画声明和计时的基类。
• 动画类型：我们将使用之前的“流行”动画，但我们也可以使用淡入动画。该课程在技术上是可选的，但它是应用不同动作的好方法。
• ​​.delay-<number>​​：正如我们之前看到的，我们可以创建不同的类，用于在每个元素上的动画开始时交错，从而产生简洁的效果。这个类也是可选的。

所以我们的动画元素现在可能看起来像：

<h2 class="animate pop">One!</h2>
<h2 class="animate pop delay-1">Two!</h2>
<h2 class="animate pop delay-2">Three!</h2>

让我们把它们算进去！

结论

检查一下：我们从一个看似基本的集合开始，​​@keyframes​​并将其变成一个成熟的系统，用于为进入视图的元素应用有趣的动画。

当然，这非常有趣。但对我来说，最大的收获是我们查看的示例如何形成一个完整的系统，该系统可用于创建基线、不同类型的动画、交错延迟以及尊重用户运动偏好的方法。对我来说，这些都是易于使用的灵活系统的所有要素。它给了我们很多东西，没有一堆多余的东西。

我们所涵盖的确实可以是一个完整的动画库。但是，当然，我并没有就此止步。我为您准备了我的整个 CSS 动画文件。那里还有更多类型的动画，包括 15 类不同的延迟，可用于令人震惊的事情。我一直在我自己的项目中使用这些，但它仍然是一个早期的草案，我希望得到反馈。请尽情享受，并在评论中告诉我您的想法！

/* ==========================================================================
Animation System by Neale Van Fleet from Rogue Amoeba
========================================================================== */
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}
/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}
@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* Pop In */
.animate.pop { animation-name: animate-pop; }
@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}
@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
/* Glow In */
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}
@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}
/* Grow In */
.animate.grow { animation-name: animate-grow; }
@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
/* Splat In */
.animate.splat { animation-name: animate-splat; }
@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
    }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0) translate(0, 0);
  }
}
/* Roll In */
.animate.roll { animation-name: animate-roll; }
@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}
/* Flip In */
.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}
/* Spin In */
.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}
@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, .9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}
/* Slide In */
.animate.slide { animation-name: animate-slide; }
@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/* Drop In */
.animate.drop { 
  animation-name: animate-drop; 
  animation-timing-function: cubic-bezier(.77, .14, .91, 1.25);
}
@keyframes animate-drop {
0% {
  opacity: 0;
  transform: translate(0,-300px) scale(0.9, 1.1);
}
95% {
  opacity: 1;
  transform: translate(0, 0) scale(0.9, 1.1);
}
96% {
  opacity: 1;
  transform: translate(10px, 0) scale(1.2, 0.9);
}
97% {
  opacity: 1;
  transform: translate(-10px, 0) scale(1.2, 0.9);
}
98% {
  opacity: 1;
  transform: translate(5px, 0) scale(1.1, 0.9);
}
99% {
  opacity: 1;
  transform: translate(-5px, 0) scale(1.1, 0.9);
}
100% {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1);
  }
}
/* Animation Delays */
.delay-1 {
  animation-delay: 0.6s;
}
.delay-2 {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 0.8s;
}
.delay-4 {
  animation-delay: 0.9s;
}
.delay-5 {
  animation-delay: 1s;
}
.delay-6 {
  animation-delay: 1.1s;
}
.delay-7 {
  animation-delay: 1.2s;
}
.delay-8 {
  animation-delay: 1.3s;
}
.delay-9 {
  animation-delay: 1.4s;
}
.delay-10 {
  animation-delay: 1.5s;
}
.delay-11 {
  animation-delay: 1.6s;
}
.delay-12 {
  animation-delay: 1.7s;
}
.delay-13 {
  animation-delay: 1.8s;
}
.delay-14 {
  animation-delay: 1.9s;
}
.delay-15 {
  animation-delay: 2s;
}
@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}