如何使用javascript激活CSS3（webkit）動畫？

我真的陷入困境。我想創建一個CSS動畫（下面）來激活點擊div。我認爲我能做到的唯一方法就是使用javascript創建一個onClick事件。不過，我不知道如何運行/ refrence在我的CSS文件中的動畫。誰能幫我？如何使用javascript激活CSS3（webkit）動畫？

這是我的css文件中的動畫，我想通過單擊div來運行。

@-webkit-keyframes colorchange { 
0% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
33% { 
    background-color: blue; 
    opacity: 0.75; 
    -webkit-transform: scale(1.1) rotate(-5deg); 
} 
67% { 
    background-color: green; 
    opacity: 0.5; 
    -webkit-transform: scale(1.1) rotate(5deg); 
} 
100% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
}

我甚至嘗試把CSS在同一文件中的JavaScript（的index.html），並用下面的代碼，試圖激活它的點擊，但沒有運氣。

<script> 
function colorchange(test) 
{ 
test.style.webkitAnimationName = 'colorchange '; 
} 
</script>

請幫助:)

來源

2010-12-05 user531192

你錯過了時間，你必須在名稱尾隨空間分配：

function colorchange(test) 
{ 
    test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed 
    test.style.webkitAnimationDuration = '4s'; 
}

一些更多的相關信息在@-webkit-keyframes：
http://webkit.org/blog/324/css-animation-2/

更新

一些工作代碼。

<html> 
    <head> 
    <style> 
    @-webkit-keyframes colorchange { 
    0% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    33% { 
     background-color: blue; 
     opacity: 0.75; 
     -webkit-transform: scale(1.1) rotate(-5deg); 
    } 
    67% { 
     background-color: green; 
     opacity: 0.5; 
     -webkit-transform: scale(1.1) rotate(5deg); 
    } 
    100% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    } 
    </style> 

    <script> 
    function colorchange(e) { 
     if (e.style.webkitAnimationName !== 'colorchange') { 
      e.style.webkitAnimationName = 'colorchange'; 
      e.style.webkitAnimationDuration = '4s'; 

      // make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect 
      setTimeout(function() { 
       e.style.webkitAnimationName = ''; 
      }, 4000); 
     } 
    } 
    </script> 
    </head> 

    <body> 
     <div onclick="colorchange(this)">Hello World!</div> 
    </body> 
</html>

來源

2010-12-05 13:15:13

謝謝你，我沒有看到尾隨空間。但我仍然有這個問題。如果我這樣做，例如：test.style.height =「50px」;它會動畫和工作，但是如果我嘗試調用我已經預先定義的自定義動畫，請執行以下操作：test.style.webkitAnimationName ='colorchange';沒有任何工作。有關於此的任何想法？ – user531192 2010-12-05 14:06:34

如何使用javascript激活CSS3（webkit）動畫？

回答

相關問題