CSS3動畫失敗

我試圖在點擊按鈕時得到一個動畫。動畫從綠色變爲紅色，但是當它結束時，它會立即返回到div的顏色本身？因此它從綠色變爲紅色，然後立即變回綠色。CSS3動畫失敗

2015-11-12 Samuel

你似乎已經忘了來發表您的代碼 – Turnip

我希望它可以幫助...

這裏是工作提琴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>

來源

2015-11-15 12:56:24

回答

相關問題