CSS3动画失败

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

我希望它能有所帮助。。。

这是一把正在工作的小提琴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>

相关内容

最新更新

热门标签：