实用简单的css3动画效果插件animate.css学习记录

被同事种草了一款css3动画插件，非常简单且实用。还没用过的小伙伴赶紧点击官网尝试一下,10分钟就能学会还在等什么!
官方网站：https://daneden.github.io/animate.css/
点击下方的Download Animate.css就可以下载，下载后引入就可以开始使用。

<link rel="stylesheet" href="css/animata.css">

使用方法非常简单，再class中添加animate，然后在上方的官方网站中选择喜欢的样式添加到类
例如：<div class="animated lightSpeedIn delay-1s infinite" ></div>
第一个值animate必填第二个值为选择的样式也是必填第三个值为延迟执行的时间可选第四个值为重复执行默认为执行一次。

如果想修改动画速度，为了产生不必要的麻烦，建议进入animate.css中查找以下代码

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

复制到HTML页面的头部style当中，然后修改即

    <style>
        .animated {
            -webkit-animation-duration: 99s;
            animation-duration: 99s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
    </style>

然后就是添加事件然后进行动画（例如点击div后进行动画），方法很简单只需要把上面的第一步第二步添加到class中。
不过值得注意的是如果只添加class类页面只能进行一次动画，如果要解决应该有很多方法，我想到的方式代码如下：

<script>
    var div = document.querySelector('div');

    div.onclick = function () {
        var init = this.getAttribute('class'); //获取初始类名
        this.className += ' animated lightSpeedIn'; //添加类名  *切记前面要加上空格！
        setTimeout(function () {
            div.className = init;
        }, 1000)//动画完成后修改为初始值
    }
</script>

或者直接刷新页面:

<script>
    var div = document.querySelector('div');

    div.onclick = function () {
        this.className += ' animated lightSpeedIn';
        setTimeout(function () {
            window.location.reload();
        }, 1000)

    }
</script>

但是我感觉好像还是有些不完美。。。如果每次点击先删除类，然后再添加看起来是最完美的，但是经过测试发现好像不能实现…不知道具体原因(难道是瞬间添加删除不可以 - -),如果有知道的大佬就麻烦留言告诉一下,小弟在此感谢了~

实用简单的css3动画效果插件animate.css学习记录

实用简单的css3动画效果插件animate.css学习记录

猜你喜欢