使用过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. vue快速入门(二)

    工程搭建完成,接下来如何使用. 首先找到src\rooter\index.js文件 这里是路由文件配置要访问的组件,这个会在后期说明 这里的components/A 是组件里边的 需要手动 创建A.v ...

  2. 分类模型输出y值

    y=w0+w1x1+w2x2+....+wnxn coef_:存储w1,w2,...wn. intercept_:存储w0 dual_coef_*support_vectors_=coef_ (1)S ...

  3. [转]jQuery为控件添加水印文字

    本文转自:http://www.cnblogs.com/gzh4455/archive/2011/09/29/2195418.html jQuery扩展: jquery.tinywatermark-3 ...

  4. [Silverlight][linq to sql]不能找到linq to sql自动生成类型

    最近在做Silverlight项目,结合使用了WCF RIA service,通过linq to sql自动生成model类型,使用起来非常方便.具体可见linq to sql之silverlight ...

  5. jQuery源代码学习笔记_工具函数_noop/error/now/trim

    jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...

  6. pat1050. String Subtraction (20)

    1050. String Subtraction (20) 时间限制 10 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Giv ...

  7. Windows窗体应用开发2--窗体和控件

    1.Windows窗体应用程序的各种组件 2.windows窗体控件的主要类别和功能 3.Windows窗体应用程序处理事件的方法 4.添加并配置Windows窗体和控件 5.创建时间处理程序并监视程 ...

  8. java 通过反射获取和设置对象属性值

    public static Object parseDate(Object object){ SimpleDateFormat sdf = new SimpleDateFormat("yyy ...

  9. app启动黑屏

    由于在手机上多次删除应用,导致加载app时加载缓存图片缺失,进行如下操作: 删除Xcode DerivedData目录释放空间: 1.首先切换到 Finder 程序,打开“前往”菜单. 2.然后按住  ...

  10. C#中关于静态与非静态的一个疑问

    关于静态方法.变量和非静态方法.变量的区别,园里的大神早就有了许多详细的总结,个人觉得静态方法.变量与非静态方法.变量的区别可以总结为以下两句话: 静态的是属于类的 非静态是属于对象的 就是说调用静态 ...