Question

我在点击按钮时尝试动画。动画从绿色变为红色，但当它结束时，它会立即返回到div本身的颜色？所以它从绿色变为红色，然后立即变回绿色。

Answer 1

我希望它有所帮助...

这是一个工作小提琴https://jsfiddle.net/rameezrami/8efnztkt或使用以下代码

<html>
<head>
<style> 
.anim-div {
    width: 200px;
    height: 200px;
    background-color: green;
    -webkit-animation-name: color-animation; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
    animation-name: color-animation;
    animation-duration: 6s;
}
.non-anim-div {
    width: 200px;
    height: 200px;
    background-color: green;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes color-animation {
    50%  {background-color: red;}
    100% {background-color: green;}
}

/* Standard syntax */
@keyframes color-animation{
    50%  {background-color: red;}
    100% {background-color: green;}
}
</style>
</head>
<body>

<div class="non-anim-div"></div>
<input type="button" value="Clik here to animate" class="btn"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(".btn").click(function(){
$(".non-anim-div").addClass("anim-div");
});
</script>
</body>
</html>

CSS3动画失败

1 个答案: