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

}

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

php编程基础教程.pptx|php编程培训,php,编程,基础,教程,pptx
php编程基础教程.pptx

历史上的今天:04月17日

热门专题

开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学,开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学
云南开放大学|云南开放大学报名,云南开放大学报考,云南开放大学,什么是云南开放大学,云南开放大学学历,云南开放大学学费,云南开放大学报名条件,云南开放大学报名时间,云南开放大学学历,云南开放大学专业
云南开放大学
APP开发|app开发_app开发公司_app软件开发_专业app开发_云南app开发公司_app定制_原生app开发定制
APP开发
云南综合高中|云南综合高中
云南综合高中
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专
弥勒综合高中|弥勒综合高中
弥勒综合高中
国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部