查看原文
其他

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

前端大全 2022-06-29

The following article is from 开源前哨 Author 小秋

【导语】: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 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;
}


  • 最后,来看看 animate.css 的一些效果:


- EOF -

推荐阅读  点击标题可跳转

1、这些 JS 的新语法有点东西啊

2、几天狂增 1.1 万 Star!谷歌这个脚本工具必须推荐一波

3、捕获用户在该页面停留的时长,我是这样做的(前端监测)


觉得本文对你有帮助?请分享给更多人

推荐关注「前端大全」,提升前端技能

点赞和在看就是最大的支持❤️

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存