animate.css是一系列很酷的、有趣的以及跨浏览器的动画库,你可以在你的项目在红引入这个动画库。使用animate.css方式也非常简单,我们只需要在页面上引入animate.css文件,如下:
<head> <link rel="stylesheet" href="animate.min.css"> </head>
然后在你想动的元素上加上animated
class。你也可以加上infinite
class,这样该元素将会无线循环的动。目前animate.css支持以下class属性:
bounce flash pulse rubberBand shake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp
下面举个例子,说明如何使用:
<h1 class="animated infinite swing ">www.iteblog.com</h1>
www.iteblog.com
animate.css项目Github地址:https://github.com/daneden/animate.css
本博客文章除特别声明,全部都是原创!原创文章版权归过往记忆大数据(过往记忆)所有,未经许可不得转载。
本文链接: 【Animate.css:一款跨浏览器的纯CSS动画库】(https://www.iteblog.com/archives/1495.html)