关于ide:71-万-Star超实用60-多种动画效果的-CSS-库

8次阅读

共计 2382 个字符，预计需要花费 6 分钟才能阅读完成。

【导语】：animate.css 是一个乏味的，跨浏览器的 CSS3 动画库。

animate.css 是一个乏味的，跨浏览器的 css3 动画库，兼容性好，使用方便。它预设了抖动、闪动、弹跳、翻转、旋转、淡入淡出等多达 60 多种动画成果，简直蕴含了所有常见的动画成果。

animate.css 基于 CSS3，只兼容反对 CSS3 animate 属性的浏览器，IE10+、Firefox、Chrome、Opera、Safari。

我的项目地址是：

https://github.com/animate-cs…

应用 npm 装置：

$ npm install animate.css --save

应用 yarn 装置：

$ yarn add animate.css

应用 CDN 间接引入：

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

根本用法。装置 animate.css 后，将以下属性增加到中即可实现动画成果的创立。

<h1 class="animate__animated animate__bounce">An animated element</h1>

自定义属性。应用自定义属性来定义动画持续时间、提早，这使得它非常灵活，当须要更改动画持续时间的工夫，只须要为全局或本地设置一个新值。

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {--animate-duration: 2s;}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

同时自定义属性还能够动静更改所有工夫受限的属性，能够通过 JS 脚本动静批改。

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

提早成果：能够间接在元素的 class 属性上增加提早成果：

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

// animate.css 提供了这些提早属性：class               默认延迟时间
animate__delay-2s   2s
animate__delay-3s   3s
animate__delay-4s   4s
animate__delay-5s   5s

// 也能够通过 --animate-delay 属性进行自定义：/* All delay classes will take 2x longer to start */
:root {--animate-delay: 2s;}

/* All delay classes will take half the time to start */
:root {--animate-delay: 0.5s;}

动画速度：能够通过增加这些 class 来管制动画的速度：

<div class="animate__animated animate__bounce animate__faster">Example</div>

// 速度的 class 包含这些：class            默认速度
animate__slow    2s
animate__slower  3s
animate__fast    800ms
animate__faster  500ms

// 能够通过 --animate-duration 全局或本地属性自定义动画工夫：/* All animations will take twice as long to finish */
:root {--animate-duration: 2s;}

/* Only this element will take half the time to finish */
.my-element {--animate-duration: 0.5s;}

循环成果：能够通过增加这些 class 来管制动画的循环次数：

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

// 可供选择的 class 有：class              循环次数
animate__repeat-1  1
animate__repeat-2  2
animate__repeat-3  3
animate__infinite  有限循环

// 相似的，也能够自定义循环次数：/* The element will repeat the animation 2x
   It's better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {--animate-repeat: 2;}