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. 论文阅读笔记四十三：DeeperLab: Single-Shot Image Parser（CVPR2019）

    论文原址:https://arxiv.org/abs/1902.05093 github:https://github.com/lingtengqiu/Deeperlab-pytorch 摘要 本文提 ...

  2. Spring Boot 静态资源路径分析

    最近在接触一个看公司的java后台项目(采用的耶鲁大学开源的一个cas单点登录系统),用的是框架是Spring Boot,用的模板是Thymeleaf,于是我生成一个Spring Boot的项目,并且 ...

  3. Android人脸检测1(静态图片)

    搭建Android人脸识别环境花了很长时间(可以查看之前的文章),解决Android开发中的杂七杂八小问题也耗时不少. 今天记录一下,点击选择照片或者拍照上传照片进行人脸检测的小demo. (andr ...

  4. Hierarchical clustering：利用层次聚类算法来把100张图片自动分成红绿蓝三种色调—Jaosn niu

    #!/usr/bin/python # coding:utf-8 from PIL import Image, ImageDraw from HierarchicalClustering import ...

  5. Windows Vue 安装

    https://nodejs.org/dist/v6.9.5/node-v6.9.5-x64.msi 新建文件夹 node_global新建文件夹 node_cachenpm config set p ...

  6. Moonlight Shadow

    歌词 Moonlight Shadow 月光幽灵 -- Dana Winner 1. The last that ever she saw him 那是她今生最后一次见到他 2. carried aw ...

  7. 构建MHA实现MySQL高可用集群架构

    一.MHA简介 MHA(Master HighAvailability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开 ...

  8. PeopleSoft如何查找jar包冲突

    PeopleSoft要查找jar包冲突问题,不像maven可以打印出所有依赖,但既然是在JVM上运行,就可以启用JVM参数 路经:%ps_cfg_home%\appserv\Domain 文件名:ps ...

  9. 201771010126 王燕《面向对象程序设计（java）》第八周学习总结

    实验六 接口的定义与使用 实验时间 2018-10-18 1.实验目的与要求 (1) 掌握接口定义方法 JAVA中通过interface关键字定义接口: 接口中只能定义public static fi ...

  10. vue-countTo---简单好用的一个数字滚动插件

    vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn. 你可以设置 startVal 和 endVal,它会自动判断计数或倒计时.支持vue-ssr.vue-count ...