官网: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. ELK+Filebeat 实践 Error : read tcp 192.168.0.2:48968->121.40.216.20:5044: i/o timeout

    问题描述: 这是一个i/o time 的问题,一般考虑就是磁盘满的问题.以下是我遇到的具体问题: 1.Kibana页面刷新,没有新数据出来,再次刷新或者点击页面上其他地方,kibana就变成这样了: ...

  2. iOS10 新特性-新功能,以及ReplayKit库

    iOS的10.0 本文总结了iOS的10,运行于目前推出iOS设备推出的主要开发者相关的功能. iOS版10引入了新的方法来增加您的应用程序通过帮助系统参与在适当的时候建议你的应用程序给用户.如果你在 ...

  3. P4213 【模板】杜教筛(Sum)

    \(\color{#0066ff}{题 目 描 述}\) 给定一个正整数\(N(N\le2^{31}-1)\) 求 \(\begin{aligned} ans_1=\sum_{i=1}^n\varph ...

  4. 5分钟构建无服务图片鉴黄web应用(基于FunctionGraph)

    函数工作流(FunctionGraph,FGS)是一项基于事件驱动的函数托管计算服务,托管函数具备以毫秒级弹性伸缩.免运维.高可靠的方式运行.即使在一些复杂的web应用场景中,函数工作流也能发挥出令人 ...

  5. 关于MVC模型的NSNotification用法

    对于iOS开发开发者, Model View Controller 模型能帮你快速理清开发思路,最近在使用Model给Controller传递数据时候了解了关于 NSNotification的一些用法 ...

  6. MySQL使用总结

    本篇博客,主要是对MySQL使用的一些总结,会持续更新. MySQL下载安装不再赘述.去官网即可.有企业版和社区版. 用命令行的方式:   1. 先运行MySQL目录的bin下的mysqld.exe ...

  7. 使用css实现垂直居中

    vartical-align vartical-align可以设置行内元素和表格单元格(table-cell)垂直对方式,所以如果元素是行内元素或者表格的话,可以直接应用这个属性对内容进行对齐设置.如 ...

  8. beego 连接postgres

    package main import ( "fmt" "github.com/astaxie/beego/orm" "mybee/models&qu ...

  9. CuteFTP文件列表按名称排序,有中文文件名时,软件死掉的解决办法

    看到很多人的解决办法是切换到一个没有中文的文件夹,点击排序后,再切换回来,这个的确是可以解决问题,但是有些繁琐! 直接一步到位的解决办法是: 依次点击菜单:工具->全局选项->导航-> ...

  10. spring boot 加载配置 文件

    在springboot启动的过程中,默契情况下会在classpath路径下加载application.properties当做系统配置文件,但有时候我们想要替换成另一个文件,可以 通过以下方式:   ...