关于css动画找到一个很有趣的css库:animation.css;下面是其用法,只需两步即可。
第一步:在html文件中引用该库
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
或者直接下载到本地引用
<link rel="stylesheet" href="animate.css">
第二步:实现css动画
实现css动画是利用类名来实现的。
<div class="animated fadeIn">fadeIn</div>
<div class="animated bounce">bounce</div>
<div class="animated bounceOutDown"> bounceOutDown</div>
其中类名:animated 是不可少的,
后面的类名:如:fadeIn等,则是动画的类型。可以在其官网上找到不同类型的动画。(官网:https://daneden.github.io/animate.css/)
以上就是animation.css的用法。
浏览器兼容:当然是只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。