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

佚名 2024-04-29 03:29:08 举报

篇首语：本文由小编为大家整理，主要介绍了#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。很酷的是，我们可以在几乎任何元素上使用它，无论是 p、span、文章、标题、部分、表格、表单……你明白了。

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

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

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

<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以上是关于#yyds干货盘点#一个方便的小系统，用于 CSS 中的动画入口的主要内容，如果未能解决你的问题，请参考以下文章