1、animate.css包含了一组炫酷、有趣、跨浏览器的动画，可以在你的项目中直接使用。

第一步：引入animate.css样式文件或者引入某些平台的CDN文件：

<head>

  <link rel="stylesheet" href="animate.min.css">

</head>

第二步：在HTML标签中添加animate提供的class类名：

<h1 class="animated infinite fadeInLeft delay-2s slow">Example</h1>

其中animated类是必须要添加的；

接着添加需要执行的动画类名，例如上面例子使用的：fadeInLeft（从左边淡入），当然还有很多其他的动画类名：animated类名；

如果某个动画效果需要无线重复运行可以加上infinite类名，这样动画效果就会一直重复执行；

需要延迟执行某个动画效果可以加上对应的delay-2s类名，这里表示延迟2秒运行动画效果，当然还有其他的延迟类名：延迟效果类名；

如果要控制某个动画效果的运行时间长短或者快慢可以加上对应的slow类名，这里表示动画从开始到结束运行2秒，当然还有其他的动画运行速度类名：动画运行速度类名；

以上内容是自己学习animated这个动画插件的成果，希望对正在学习的您有所帮助，谢谢。

附上animated插件作者的github地址：https://github.com/daneden/animate.css

打开支付宝首页搜索“” 立即领红包

学习animate.css包含了一组炫酷、有趣、跨浏览器的动画的更多相关文章

  1. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  2. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  3. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  4. Slick.js+Animate.css 结合让网页炫动起来

    一个代码示例: html部分 <link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/animate.css ...

  5. 如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...

  6. 前端每日实战：17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...

  7. 17.纯 CSS 创作炫酷的同心矩形旋转动画

    原文地址:https://segmentfault.com/a/1190000014807564 感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了. HTML代码: <div cla ...

  8. Android学习笔记_42_各种图形的炫酷效果的实现和使用

    一.文档位置: 这里在android中的图形,在帮助文档的这个页面,  android-sdk-windows\docs\guide\topics\resources\drawable-resourc ...

  9. 【动画消消乐｜CSS】086.炫酷水波浪Loading过渡动画

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

随机推荐

  1. 微信支付的安全漏洞之XXE

    1.场景:国外安全社区公布微信支付官方SDK存在严重漏洞,可导致商家服务器被入侵(绕过支付的效果).目前,漏洞详细信息以及攻击方式已被公开,影响范围巨大(已确认陌陌.vivo因使用该SDK而存在该漏洞 ...

  2. MySQL学习笔记：timediff、timestampdiff、datediff

    一.时间差函数:timestampdiff 语法:timestampdiff(interval, datetime1,datetime2) 结果:返回(时间2-时间1)的时间差,结果单位由interv ...

  3. Make Eudict for reviewing example sentences

    Recently, I've started an activity of recording typical and nice English sentences from dictionaries ...

  4. 通过linux版本的lr agent提示找不到web_reg_save_param_ex函数

    Action.c(5): Error: C interpreter run time error: /tmp/brr_TSBgR2/netdir/E/lrscript/aaa/Action.c (5) ...

  5. Zookeeper集群搭建步骤及相关知识点深入了解

    1.zookeeper概念 zookeeper是一个分布式协调服务:a:zookeeper是为别的分布式程序服务的 b:zookeeper本身就是一个分布式程序(只要半数以上节点存活,zookeepe ...

  6. Linux中的 openssl-opensslv

    问题 在安装内核模块系统突然出现以下错误 寻找问题 一开始我以为是openssl没有安装,故先进行openssl的检查: 输入yum info openssl 从图中可知,openssl是已经安装过了 ...

  7. Python assert 断言函数

    http://blog.csdn.net/hunyxv/article/details/52737339 使用assert断言是学习python一个非常好的习惯,python assert 断言句语格 ...

  8. lstm bptt推导

    深蓝 nlp 180429这个有详细的讲解

  9. GMA Round 1 最短距离

    传送门 最短距离 在椭圆C:$\frac{x^2}{20^2}+\frac{y^2}{18^2}=1$上作两条相互垂直的切线,切线交点为P,求P到椭圆C的最短距离.结果保留6位小数. 设椭圆方程:$\ ...

  10. [LeetCode] Preimage Size of Factorial Zeroes Function 阶乘零的原像个数函数

    Let f(x) be the number of zeroes at the end of x!. (Recall that x! = 1 * 2 * 3 * ... * x, and by con ...