使用过CSS3编写动画的同学一定感叹CSS3的强大,但是也会感到书写的麻烦。每次都要计算动画的各个参数,十分麻烦。有没有一个库能封装一些常用的CSS3动画效果。答案是肯定的,animate.css就是一个很好的CSS库,github地址:https://github.com/daneden/animate.css 。下面我们一起来看一看如何使用它。

点击上面的链接,就可以看到一个很简约的页面,其实这个页面就是animate.css的API 文档。在页面中间的下拉框中选择一个动画类,再点击旁边的按钮,就可以看到上方的文字上的动画。

那么,我们在实际的开发中又该如何使用animate.css。比如我有一个div需要使用bounce动画。那么就可以如下面的方法来编写:

 <div id="animate-1" class="animated">演示bounce动画</div>

注意class=“animated” 是调用动画必备的,然后就在需要的时候调用:

 $('.animate-1').addClass('bounce');

这样,就可以看到动画了。我简单试了一下,这些动画在移动平台上也是可以用的。

动画利器animate.css的更多相关文章

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

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

  2. 微信网页动画---swiper.animate.css

    项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. CSS3动画框架 Animate.css

    CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...

  4. vue 动画框架Animate.css @keyframes

    <script src="vue.js"></script> <link rel="stylesheet" href=" ...

  5. css 动画类库Animate.css

    地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...

  6. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  7. Animate.css介绍

    Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...

  8. animate.css(第三方动画使用方法)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. 使用codesmith无法连接mysql问题

    最近研究codesmith的用法,遇到了如题的问题,记录一下解决的方法. 1.问题描述: 在codesmith中选择MySQLSchemaProvider并连接数据库时,会报以下错误: Test fa ...

  2. 错误 chamfermatching.cpp:969:30: error: the compiler can assume that the address of ‘annotate_img’

    修改 ./build/modules/contrib/CMakeFiles/opencv_contrib.dir/flags.make文件,删掉-Werror=address,然后重新make

  3. 细讲递归(recursion)

    首先先对递归进行入门. 递归是以自相似的方式重复项目的过程.在编程语言中,如果程序允许您在同一函数内调用函数,则称其为函数的递归调用. 简而言之,递归就是函数的自身调用.可以看看下面的递归使用: vo ...

  4. android 中百度地图 关于地图缩放所调用的事件

    在做百度地图的时候 javascript 有个地图缩放的事件 但是在android 的API里面却没有,但是还好  官方给了一个MapStatusChangeListener,是这样介绍的 百度地图S ...

  5. https的设计原理

    参考文章: https://www.cnblogs.com/zhangshitong/p/6478721.html http://blog.jobbole.com/113883/ 这两篇文章写的非常好 ...

  6. GitKraken使用教程-基础部分(7)

    8.  本地分支和标签 1) 在提交记录区中查看分支状态 提交记录区中每一个分支都位于一个提交记录所在的行中. 从图 2‑1中可以看到,服务器上的master分支停留在整理格式(把这个提交记录记为or ...

  7. react做股票、期货交易遇到的问题(不完全是react)及解决方法。

    公司项目主要是做股票及期货行情展示及交易,h5相应的做了一些功能---可以看行情图及模拟交易,实盘交易存在一定的风险,老板希望做自己的产品,这样h5就尴尬了,不过没关系,项目里还是有一定技术含量的-- ...

  8. SQL——行转列,列转行

    行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通过CASE WHEN 语句来实现,也可以通过 SQL SERVER 2005 新增的运算符PIVOT来实现.用传统的方法,比较好理解.层次清 ...

  9. js跳转到邮箱登录

    做邮箱验证时为了用户体验,往往会有跳转到邮箱登录这一按钮,其中的js如下: $("#btnemail").click(function () { var userEmail = $ ...

  10. 一、简单gridview列表展示

    1.HomeController public ActionResult Index() { //返回绑定models的index.cshtml return View(NorthwindDataPr ...