Animate.css介绍

Animate.css简介

animate.css 动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

Animate.css下载

百度云盘下载链接

Animate.css动画演示

演示地址

Animate模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 引用animate文件 --><link rel="stylesheet" href="css/animate.min.css"/>
</head>
<body></body>
</html>

添加一个动画

<!-- animated类似与全局变量，定义动画持续时间 -->
<!-- bounce具体动画的名称 -->
<div class="animated bounce">Animate.css
</div>

定义播放次数

<!-- infinite定义动画无限播放 -->
<div class="animated bounce infinite">Animate.css
</div>

通过JavaScript或jQuery添加Animate动画

<div>Animate.css
</div>
<!-- 在线引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通过jQuery添加animate动画 -->
<script>$('div').addClass('animated bounce');
</script>

添加定时器，5秒后删除animate无限播放效果

<div>Animate.css
</div>
<!-- 在线引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通过JavaScript或jQuery添加animate动画 -->
<script>$('div').addClass('animated bounce infinite');setTimeout(function(){$("div").removeClass("infinite");},5000)
</script>

Animate.css介绍相关推荐

Animate.css介绍及使用教程
前面的话 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单.本文将详细介绍animate.css的使用引入 anim ...
html css animate,animate.css的使用方法
animate.css介绍 animate.css是一个跨浏览器的css3动画库 animate.css基础使用引入animate.css文件给指定的元素添加基础class animated 给指 ...
animate.css 在 vue 脚手架中结合wow.js的应用方法详细介绍
简介众所周知,animate.css是非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画,但是不兼容IE8及以下版本,就算用jq控制,性能也不是很好. wowjs向下滚动页面时显示CSS动 ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
使用animate实现页面过度_很多人都在使用的开源CSS动画效果库——animate.css
介绍 animate.css是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用.非常适合强调,主页,滑块和一般的加水效果. animate.css v4正在进行许多改进和重大更改,包括CSS自定义属性 ...
强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
css js写在一起 vue_如何把vue2.0 和 animate.css合并在一起使用（详细教程）
animate.css是一款前端动画库,相似的有velocity-animate.这篇文章给大家介绍vue2.0 和 animate.css的结合使用,需要的朋友参考下吧这里说的是vue2.0和an ...
性能强悍的CSS动画库--Animate.css
前言互联网圈子里有造"轮子"的说法,能用现成的就不要自己去捣鼓了,既省时又省力!今天介绍的就是一款性能强悍的CSS动画库(Animate.css)的使用指导. 安装方法方法一: ...
react基于WOW.js和Animate.css实现特定位置的动画执行
写在前面:对于css3动画小白的我,自己动手写动画确实很艰难,但是无意间了解到有相关库可以实现,为什么不用呢,嘿嘿(当然也在学css3啦) 文章目录效果展示官网文档实现步骤 1.下载WOW.js ...

Animate.css介绍

Animate.css介绍相关推荐

最新文章

热门文章