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. 继承了AppCompatActivity的全屏设置

    v7下全屏设置:getSupportActionBar().hide();getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN ...

  2. C++中STL常用容器的优点和缺点

    我们常用到的STL容器有vector.list.deque.map.multimap.set和multiset,它们究竟有何区别,各自的优缺点是什么,为了更好的扬长避短,提高程序性能,在使用之前需要我 ...

  3. 【Android】PreferenceActivity 详解

    PreferenceActivity是专业的设置界面,只要给它指定一个配置好的xml,它就能自动根据操作更改程序Preference的相应值. 首先要用一个xml文件来配置一个设置界面,也就是我们说的 ...

  4. Linux下IPC中的信号量PV操作

    代码如下所示,两边对照查看程序!(左图为先运行进程 右图为后运行进程)    运行的效果就是:当左边的进程检测到EOF,释放资源V操作之后,右边的进程会迅速的执行对应的printf的操作! 所有代码文 ...

  5. Laravel 5 中间件、路由群组、子域名路由、 权限控制的基本使用方法

    创建控制器: php artisan make:controller Admin/IndexController 创建Middleware: php artisan make:middleware T ...

  6. JAVA篇<一> 继承extends（已转移到JAVA总结篇）

    前题:如果不经过指出继承,那么所有的类都继承了JAVA中的Object类. 正文: 继承的关键字是:extends,是所有面向对象语言的重要特性. 例public class TestExtends ...

  7. Django——微信消息推送

    前言 微信公众号的分类 微信消息推送 公众号 已认证公众号 服务号 已认证服务号 企业号 基于:微信认证服务号 主动推送微信消息. 前提:关注服务号 环境:沙箱环境 沙箱环境地址: https://m ...

  8. Python编程中出现ImportError: bad magic number in 'numpy': b'\x03\xf3\r\n'

    在终端输入ls -a 会出现一个.pyc的文件,将文件删掉

  9. CSSposition属性

    基本html文本 1.  position-static #part1{ width:  200px; height:  200px; background:  gold; } #part2{ pos ...

  10. getsockopt和setsockopt函数

    在Unix网络编程中通常用到getsockopt和setsockopt两个函数来获取和设置套接口的选项. getsockopt()函数用于获取任意类型.任意状态套接口的选项当前值,并把结果存入optv ...