Question

我正在尝试使用animate.css

<link rel="stylesheet" href="animate.css" type='text/css'>

这是：

.animated {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}
@-moz-keyframes wobble {
    0% {
        -moz-transform: translateX(0%);
    }
    15% {
        -moz-transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        -moz-transform: translateX(20%) rotate(3deg);
    }
    45% {
        -moz-transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        -moz-transform: translateX(10%) rotate(2deg);
    }
    75% {
        -moz-transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        -moz-transform: translateX(0%);
    }
}
@-o-keyframes wobble {
    0% {
        -o-transform: translateX(0%);
    }
    15% {
        -o-transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        -o-transform: translateX(20%) rotate(3deg);
    }
    45% {
        -o-transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        -o-transform: translateX(10%) rotate(2deg);
    }
    75% {
        -o-transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        -o-transform: translateX(0%);
    }
}
@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}
.animated.wobble {
    -webkit-animation-name: wobble;
    -moz-animation-name: wobble;
    -o-animation-name: wobble;
    animation-name: wobble;
}

和HTML：

<a class="yo">yo</a>

然后是Jquery：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

$(document).ready(function(){ 
$(".yo").click(function() {
         $(this).addClass('animated wobble');
});
});

但是当我点击yo时，它会更改类（因此我知道jquery正在运行）但没有任何反应。我还在css中添加了一个类并更改了字体颜色并且它有效（所以我知道链接工作正常）但是当我点击时仍然没有摆动动画？

Answer 1

我相信你需要指定调用哪个动画。尝试将此添加到您的动画类：

.animated {
   -webkit-animation-name: wobble;
   -moz-animation-name: wobble;
   -o-animation-name: wobble;
   animation-name: wobble;
}

Wobble不是一个类名，它只是动画的名称，所以你可以删除jQuery中的摆动addClass。

编辑：看起来我没有读过你所有的CSS。试着移动你的 .animated.wobble{}部分下方的.animated{}部分。

如何使用链接的动画CSS？

1 个答案: