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. apache 配置反向代理 设置

    1.下载 安装 下载地址:http://httpd.apache.org/download.cgi 将apache 安装到某个目录中 修改conf/http.conf文件 修改配置文件端口  (端口为 ...

  2. [转] Vue + Webpack 组件式开发(练习环境)

    前言 研究了下别人的 vue 多页面框架, 都是直接复制 package.json 文件,然后在本地 npm install 一下即可, 或者使用官网 vue-cli 工具生成一个项目, 觉得这样虽然 ...

  3. 设计模式学习之访问者模式（Visitor，行为型模式）（21）

    参考:https://www.cnblogs.com/edisonchou/p/7247990.html 在患者就医时,医生会根据病情开具处方单,很多医院都会存在以下这个流程:划价人员拿到处方单之后根 ...

  4. Beta冲刺4/7

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(4/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 ppt模板 接下来的计划 做好机动. ...

  5. Manjaro为包管理器pacman和yaourt\yay 添加多线程下载

    用轻量级的axle代替了默认的wget来下载升级包. 1. paman添加多线程 编辑pacman.conf文件: vim /etc/pacman.conf 如果有类似xfercommand的话,注释 ...

  6. mybatis查询语句的背后

    转载请注明出处... 一.前言 在先了解mybatis查询之前,先大致了解下以下代码的为查询做了哪些铺垫,在这里我们要事先了解,myabtis会默认使用DefaultSqlSessionFactory ...

  7. MyBatis:SQL语句中的foreach的详细介绍

    foreach 也就是遍历迭代,在SQL中通常用在 in 这个关键词的后面foreach元素的属性主要有 item,index,collection,open,separator,close. 分别代 ...

  8. [PA2014]Parking

    [PA2014]Parking 题目大意: 停车场是一个宽度为\(w(w\le10^9)\)的矩形.我们以其左下角顶点为原点,坐标轴平行于矩形的边,建立直角坐标系.停车场很长,我们可以认为它一直向右边 ...

  9. TopCoder Div2

    代码附在文末. 多组数据一定要初始化啊啊啊 贪心要[大胆]猜想,小心证明 A 题目翻译 题目描述 有两个正整数A和B,两个操作+3或者-2. 问,至少多少次操作可以让A变到B 输入 多组数据,第一行一 ...

  10. 容器加載Web工程的Web.xml文件介紹

    转 容器加載Web工程的Web.xml文件介紹 [-] 这篇文章主要是综合网上关于webxml的一些介绍希望对大家有所帮助也欢迎大家一起讨论 ---题记 一            Webxml详解 一 ...