在前端开发中，动画效果经常是我们需要考虑的问题之一。@tmmc/animate-scss 是一个基于 SCSS 的动画库，提供了丰富的动画效果，可帮助开发者快速实现页面元素的动态效果。本文将介绍如何使用 @tmmc/animate-scss 这个 npm 包。
安装
首先需要使用 npm 安装 @tmmc/animate-scss 包，可以使用以下命令：
npm install @tmmc/animate-scss --save
使用
安装成功后，可以引入 animate-scss：
@import "~@tmmc/animate-scss/animate";
之后，即可直接在样式中使用类名，为元素添加动画效果。以下是一些常用的类名和效果：
fadeIn
通过逐渐增加元素的不透明度来制造淡入效果。
<div class="animated fadeIn">Hello World!</div>
bounce
元素在指定的方向上反弹。
<div class="animated bounce">Hello World!</div>
flip
元素先沿 Y 轴翻转，然后在从原来的位置上翻转回去。
<div class="animated flip">Hello World!</div>
pulse
元素会先放大，再缩小。
<div class="animated pulse">Hello World!</div>
rollIn
元素从左边滚动进入屏幕。
<div class="animated rollIn">Hello World!</div>
zoomIn
元素逐渐放大。
<div class="animated zoomIn">Hello World!</div>
创建自己的动画
除了使用现成的动画效果之外，@tmmc/animate-scss 还允许你创建自己的动画效果。在样式中，为元素添加 .animated 类名和自定义的类名即可，例如：
-- -------------------- ---- -------
---------- ---------- -
---- -
-------- --
---------- -------------- ------ ---
-
-- -
-------- --
---------- -----
-
-
-------------------- -
--------------- -----------
-然后，在 HTML 中为元素添加 .animated 和自定义的类名即可：
<div class="animated fadeInDown">Hello World!</div>
总结
@tmmc/animate-scss 可以大大简化动画效果的实现，提高开发效率。借助它，开发者不必再为繁琐的动画效果编写复杂的 CSS 代码，而是可以通过简单的类名快速实现。同时，我们也可以通过自定义动画效果，满足具体项目的需要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5b51ab1864dac66ffb