animate.css的简单使用

简介

Animate.css是一款非常好的,跨浏览器的动画库。

浏览器兼容性

因为animate.css的底层是css3,所以支持的浏览器必须对css3支持良好;

IE10+     谷歌     火狐Firefox(ff)     Safari     opera 。

官网

daneden.github.io/animate.css/

使用

1.引入需要的css库

<link rel="stylesheet" href="animate.min.css">

1.书写html,并且把需要做动画的元素添加上对应的类名(一共2个,其中第一个必须是animated,第二个是需要的动画效果类)

<div class="animated bounce" id=“box”></div>

动态添加

可以通过jquery来实现:

$('#yourElement').addClass('animated bounceOutLeft');

也可以通过javaScript的setAttribute或className形式来实现。






最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,735评论 18 503
  • 前言: 随着HTML5规范的不断完善,围绕着这一生态有很多实用的框架,极大的提高了我们的开发效率,常见的框架代表有...
    秒签T阅读 2,695评论 0 0
  • 框架一 :: Animate.css Animate.css是一个css动画样式库,可以减少我们的开发时间.它预设...
    西巴撸阅读 7,664评论 0 5
  • HTML5常用框架 前言 随着HTML5规范的不断完善,围绕着这一生态有很多实用的框架,极大的提高了我们的开发效率...
    方克己阅读 5,059评论 0 3
  • 简介:我是陶瓷喷墨机售后技术工程师。喷墨机就是墨水装在喷墨机里面给瓷砖印花,类似打印机,我作为售后工程师主要负责...
    007胡明阅读 2,118评论 0 0