7.1 万 Star！超实用，60 多种动画效果的 CSS 库 / 开普饭

微小奇圈 2021-07-25

以下文章来源于开源前哨，作者小秋

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

简介

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

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

项目地址是：

https://github.com/animate-css/animate.css

安装

使用 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 accomplishdocument.documentElement.style.setProperty('--animate-duration', '2s');

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

延迟效果：可以直接在元素的 class 属性上添加延迟效果：

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

// animate.css 提供了这些延迟属性：class               默认延迟时间animate__delay-2s   2sanimate__delay-3s   3sanimate__delay-4s   4sanimate__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    2sanimate__slower  3sanimate__fast    800msanimate__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  1animate__repeat-2  2animate__repeat-3  3animate__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;}

最后，来看看 animate.css 的一些效果：

- EOF -

7.1 万 Star！超实用，60 多种动画效果的 CSS 库

简介

安装

简单使用

相关推荐