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. [原创]基于Zynq Linux环境搭建(一)

    安装VMWare版本12 Ubuntu版本 12.04.5 64bit 系统安装完成后,登陆系统,在sotfware中心安装konsole.gvim.software source等基本软件 在sof ...

  2. select2 api参数的文档

    具体参数可以参考一下: 参数 类型 描述 Width 字符串 控制 宽度 样式属性的Select2容器div minimumInputLength int 最小数量的字符 maximumInputLe ...

  3. sklearn交叉验证-【老鱼学sklearn】

    交叉验证(Cross validation),有时亦称循环估计, 是一种统计学上将数据样本切割成较小子集的实用方法.于是可以先在一个子集上做分析, 而其它子集则用来做后续对此分析的确认及验证. 一开始 ...

  4. 咸鱼入门到放弃3--tomcat

    Tomcat学习与使用 一. Tomcat安装及配置 二.项目部署(虚拟目录映射) Web应用开发好后,若想供外界访问,需要把web应用所在目录交给web服务器管理,这个过程称之为虚似目录的映射. 虚 ...

  5. EHDU-1039 asier Done Than Said?

    Password security is a tricky thing. Users prefer simple passwords that are easy to remember (like b ...

  6. sqlalchemy.exc.ProgrammingError: (pymysql.err.ProgrammingError)

    在我学习flask建立网站时间碰到了一个棘手的问题,就是在我进行操作日志的更新时间,发现表格建立有点错误,导致表缺失,从而报了下面的错误 sqlalchemy.exc.ProgrammingError ...

  7. Linux生成私钥和公钥免密连接

    本文介绍Linux系统生成私钥和公钥进行免密连接,内容比较简单,阅读需要3分钟. 1.大致流程 有时需要从服务器A免密连接到服务器B,这时需要在服务器A生成私钥和公钥,大致过程其实就2步. 1.1 在 ...

  8. 格式化代码引发的css编译失败

    之前在做feather项目,处理IE8下的问题时,写 filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='#', sizi ...

  9. sybase central 报 NullPointerException 解决

    准备发布版本,但是要创建数据库的时候遇到了问题,发现之前可以正常打开的sybase Central 现在无法打开了.苦恼一段时间后找到如下解决方法. 报错如下: 解决如下: 正常打开:

  10. 2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017)

    A. Alien Sunset 暴力枚举答案即可. #include<cstdio> int n,i,mx; struct P{ int h,r,t; bool night(int x){ ...