CSS中动画入口的方便的小系统-css教程-PHP中文网

A Handy Little System for Animated Entrances in 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; }
}

登录后复制

请注意，这里还有一个0.5秒的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、article、header、section、table、form……你懂的。

我们将要做的是：我们想在三个HTML元素上使用我们的动画系统，每个元素获得三个类。我们可以将所有动画代码硬编码到元素本身，但是将其拆分可以让我们获得一个可以重用的动画系统。

.animate: 这是包含我们的核心动画声明和时间的基类。
动画类型: 我们将使用之前的“弹出”动画，但我们也可以使用淡入动画。这个类在技术上是可选的，但它是应用不同运动的好方法。
.delay-: 如前所述，我们可以创建不同的类来交错动画在每个元素上开始的时间，从而产生一种整洁的效果。这个类也是可选的。

因此，我们的动画元素现在可能看起来像这样：

<h2>One!</h2>
<h2>Two!</h2>
<h2>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;
  }
}

登录后复制

以上是CSS中动画入口的方便的小系统的详细内容。更多信息请关注PHP中文网其他相关文章！