卓尔高考网
首页>>高考新闻

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

admin

篇首语：本文由小编为大家整理，主要介绍了#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 中的动画入口的主要内容，如果未能解决你的问题，请参考以下文章

您可能还会对下面的文章感兴趣：

相关文章