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. mysql 表结构及基本操作

    说明在mysql语句中,sql语句总共分四种 a.DDL数据定义语句=>常用的ddl语句有(CREATE[创建],DROP[删除],ALTER[修改表结构]) b.DML数据操作语句=>常 ...

  2. javascript数组去重 String字符串去掉两端空格 javascript Array二分法排序 比较 javascript 求和

    通过原形添加方法: ==================数组去重(对象去重法)======================= Array.prototype.unique=function(){ va ...

  3. python---二叉树遍历

    重学. # coding = utf-8 # 二叉树遍历 class Node: """节点类""" def __init__(self, ...

  4. linux基础命令学习笔记（一）

    2019年4月1日: “目录” = “文件夹” 常用命令(一): 1.ls: list 列表,默认当前文件夹的文件和目录 linux:命令+选项+参数 ls -l:长输出,列出文件的详细信息 - rw ...

  5. Docker打包 Asp.Net Core应用，在CentOS上运行（转）

    转载连接:https://www.cnblogs.com/ibeisha/archive/2017/09/09/netcoreondocker.html 本文主要介绍下运用docker虚拟技术打包As ...

  6. 一键配置高可用Hadoop集群（hdfs HA+zookeeper HA）

    准备环境 3台节点,主节点 建议 2G 内存,两个从节点 1.5G内存, 桥接网络 关闭防火墙 配置ssh,让节点之间能够相互 ping 通 准备  软件放到 autoInstall  目录下,已存放 ...

  7. Codeforces 1045E. Ancient civilizations 构造 计算几何 凸包

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF1045E.html 4K码量构造题,CF血腥残暴! 题解 首先,如果所有点颜色相同,那么直接连个菊花搞定. ...

  8. 按比例缩放DIV

    class ResponsiveDiv extends React.Component { constructor(props) { super(props); this.state = { widt ...

  9. 堡垒机jumpserver测试记录--使用

    快速入门 截图就不放了,官网都有,这里只是就遇到的一些问题做下记录 必备条件 一台安装好 Jumpserver 系统的可用主机(堡垒机) 一台或多台可用的 Linux.Windows资产设备(被管理的 ...

  10. Python-Django学习

    1,安装Django与python版本的对应1.8 2.7,3.2--3.51.9,1.10 2.7,3.4,3.51.11 2.7,3.4,3.5,3.62.0 2.1 第一种安装:pip inst ...