Animate.css 一款牛逼的css3动画库

2018-06-24 01:48:21来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

    Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了,

简单使用

 1 首先引入 animate的 css 文件样式

         cdn文件 

 <head>
        <link rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  </head>

         下载到本地

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

  

 2 给指定元素止指定样式

          我们看到有三个class ,其中第一个animated  是基本样式,所有要产生动画的元素都需要,第二个infinite是可          选的,如果加了这个类,动画将循环执行,第三个就是动画特效了 ,目前animated 已经有很多动画特效了具体可          以点击这里查看 www.siyouku.cn/wenqing/animation

   
 <div id="demoimg" class="animated infinite bounce">
      <img style="width: 200px; height: 200px;" src="/info/upimg/allimg/180624/014S33P4-0.jpg" />
 </div>

  

3 当动画效果执行完成可以通过以下代码添加事件

$('#demoimg').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

  

4 有时候我们需要自定我们对动画的一些设置我们可以用下面的代码实现

#demoimg
  { 
   -vendor-animation-duration: 3s; //动画持续时间
   -vendor-animation-delay: 2s; //动画延迟时间
   -vendor-animation-iteration-count: infinite; //动画执行次数,这里是一直执行
}

  

相关链接

      动画demo:www.siyouku.cn/wenqing/animation

      github:github.com/daneden/animate.css

      本文永久更新地址:www.siyouku.cn/article/6827.html

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML 回顾整理

下一篇:两个div标签,控制标签左边固定,右边自适应(滴滴面试题)