官网:https://daneden.github.io/animate.css/

Animate.css是一个有趣的,跨浏览器的css3动画库

  • 用法
  • 首先引入animate css文件:
    <link rel="stylesheet" href="animate.min.css">
 
  • 给指定的元素加上指定的动画样式名

<div class="animated bounceOutLeft"></div>

包括两个class名,第一个是基本的,必须添加的样式名,任何想实现的元素都得添加这个。第二个是指定的动画样式名

  • animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如

#jq22{

  animate-duration: 2s;    //动画持续时间
  animate-delay: 1s;    //动画延迟时间
  animate-iteration-count: 2;    //动画执行次数
}

(生产)animate.css 动画库的更多相关文章

  1. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  3. Animate.css动画库,简单的使用,以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  4. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  5. vue中使用animate.css动画库

    1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...

  6. css动画库

    转载自:http://www.cnblogs.com/starof/p/4968769.html 本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方 ...

  7. 3个CSS动画库,比Animated还好用,让你的网站酷炫起来

    本文首发于https://www.1024nav.com/tools/css-animation-library 转载请注明出处 整理了日常前端开发中常用的css动画库,让你的网页动起来,可以在生成中 ...

  8. 八个解决你80%需求的CSS动画库

    八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库, ...

  9. CSS动画库——animate.css的使用

    Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...

随机推荐

  1. 新姿势!Redis中调用Lua脚本以实现原子性操作

    背景:有一服务提供者Leader,有多个消息订阅者Workers.Leader是一个排队程序,维护了一个用户队列,当某个资源空闲下来并被分配至队列中的用户时,Leader会向订阅者推送消息(消息带有唯 ...

  2. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_通过ILDasm.exe查看编译器如何将类型及其成员编译成元数据

    [实例代码] using System; public sealed class SomeType //-------------1 { //嵌套类 private class SomeNestedT ...

  3. C#工具类之字典扩展类

    using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...

  4. Outlook 2010中263邮箱客户端设置

    Outlook 2010中263邮箱客户端设置 1.首次添加电子邮箱账户:打开outlook,在账户设置和服务中分别选择:“手动配置服务器设置或其他服务器类型”,“Internet电子邮件” 2.在i ...

  5. Windows Server2008服务器可以远程桌面,但在内网中却Ping不通--解决方法

    Windows Server2008服务器可以通过远程桌面登录,但在内网中却Ping不通.所以要考虑的是防火墙是不是做了限制. 最简单粗暴的方法是直接把防火墙给关掉 还有个其他的方法是参考别人写的,我 ...

  6. C++二维数组的动态声明

    int **a  =  new int* [m]   //分配一个指针数组,将其首地址保存在a中   . for(int i = 0; i < m; i++)   //为指针数组的每个元素分配一 ...

  7. ora-1652

    ###检查是否有temp 在使用 step 2: 检查是否有事务使用到temp,并且进行删除. SELECT vt.inst_id,vs.sid,vs.serial#,vs.username,vs.o ...

  8. android Activity启动过程(四)startActivityUncheckedLocked

    final int startActivityUncheckedLocked(ActivityRecord r, ActivityRecord sourceRecord, IVoiceInteract ...

  9. Python函数调用

    1.同级目录下的调用 - src |- mod1.py |- test1.py 若在程序test1.py中导入模块mod1.py,则直接使用 import mod1 或 from mod1 impor ...

  10. vue router-link 添加在定义事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是v-for遍历出来的选项卡, 鼠标移上去出现删除标签,移除标签消失的效果 原代码: ...