锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识动画小系统干货

学向勤中得，萤窗万卷书。这篇文章主要讲述#yyds干货盘点#一个方便的小系统，用于 CSS 中的动画入口相关的知识，希望能为你提供帮助。
【#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-1animation-delay: 0.6s;
.delay-2animation-delay: 0.7s;
.delay-3animation-delay: 0.8s;

其他一切都完全一样。请记住，我们的基本延迟是??0.5s??，所以这些辅助类从那里开始计数。
尊重无障碍偏好
让我们成为优秀的网络公民并为启用了??减少运动首选项??设置的用户删除我们的动画：
@media screen and (prefers-reduced-motion: reduce)
.animateanimation: 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.popanimation-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.growanimation-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.splatanimation-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.rollanimation

    推荐阅读


    上一篇：#yyds干货盘点#最全深入浅出聊聊IO

    下一篇：#yyds干货盘点#一次性解决text-justify，text-orientation等冷门属性文本属性