16、动画元素与PostCSS：从基础到实践

tree

于 2025-11-05 10:02:33 发布

阅读量4

点赞数

CC 4.0 BY-SA版权

分类专栏：掌握PostCSS高效开发文章标签： PostCSS 动画 Animate.css

本文链接：https://blog.youkuaiyun.com/tree/article/details/155116268

掌握PostCSS高效开发专栏收录该内容

33 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

动画元素与PostCSS：从基础到实践

在网页开发中，动画效果能够为网站增添活力和吸引力。本文将带您逐步了解如何使用预构建库、SASS以及过渡到PostCSS来实现动画效果。

1. 预构建库Animate.css的使用

在演示中，我们使用了Animate.css库来实现动画效果。该库包含了许多基于 @keyframe 的动画，例如：

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-1.875rem);}
  60% {transform: translateY(-0.9375rem);}
}

在代码的 <head> 部分引入该库后，我们可以通过类名来调用动画：

<div id="gallery">
  <a href="#"><img class="animated bounce"  src="http://lorempixum.com/200/200/city/1" alt="" /></a>
  ...
</div>

其中， .animated 类控制动画的持续时间和时机，根据添加的动画名称进行设置。如果不使用JavaScript，动画在演示加载时只会运

会员秒杀 ¥9.9 重磅福利

超级会员免费看