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

Posted liuhao951866

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#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

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

css实现简单骨架屏skeleton;可用于App,小程序,uniapp#yyds干货盘点#

#yyds干货盘点#CSS的clamp()函数实现响应式布局

#yyds干货盘点#Linux进程

#yyds干货盘点#Linux进程

#yyds干货盘点# 如何优雅的获取 Mac OS 系统 IP 地址?

#yyds干货盘点#Linux用户和组