如何使用css3單擊類或id時動畫？

我正在學習CSS3現在我可以運行動畫文窗口打開，但如果我點擊任何class和id，然後只將動畫，我需要請任何一個幫助我如何使用css3單擊類或id時動畫？

<html> 

     <div id="test" class="target animate">Try me</div> 

      <div class="fff" style="width:100px;height:100px;background:#4AB72F"><h3>click here</h3></div> 




      <style> 


      #test { 
       width:160px; 
       height:200px; 
       margin: 100px; 
       background:#68C6F2; 

       -webkit-transition: all 1s ease-in-out; 
       -moz-transition: all 1s ease-in-out;  
       -ms-transition: all 1s ease-in-out; 
       -o-transition: all 1s ease-in-out;  
       transition: all 1s ease-in-out; 
      } 

      #test.animate { 
       -moz-animation-name: test; 
       -moz-animation-duration: 1s; 
      } 

      @keyframes test{ 
       from { -moz-transform: translateX(-100%) scale(.1) rotateY(-50deg);} 
      } 

      </style> 
</html>

我使用Firefox瀏覽器，很好地工作，但我需要，如果我點擊任何類或身份證，那麼只有它會動畫，任何人請協助我（或者你可以告訴我喜歡使用jquery它會對我很有幫助）謝謝

來源

2013-09-26 user2717260

要反對在運行時的動畫？ –

我已經回答了這個其他人也是。我想你的前途也是一樣的。

好吧，我不認爲這是很容易地創建動態@keyframes they are inflexible because they must be hard-coded.

的轉換是一個輕鬆一點的工作，因爲他們可以優雅地由JavaScript執行的任何CSS的變化。

然而，複雜性CSS轉換可以給你的是相當有限 - an animation with multiple steps is difficult to achieve.

這是CSS @keyframe動畫是爲了解決一個問題，but they don’t offer the level of dynamic responsiveness that transitions do.

但這些鏈接可能幫助你

Link1：產生許多微小的步驟@ -webkit-關鍵幀動畫的工具。這爲無限選擇緩解配方打開了大門。

Link2這可能是非常有用的。

Link3將它作爲一個基礎，因爲它提供了一個用戶界面來創建動畫並將其導出到CSS代碼將是一個很大的幫助。

我猜** this解決方案肯定會爲您工作。它用於動態關鍵幀

來源

2013-09-26 10:33:24

如何使用css3單擊類或id時動畫？

回答

相關問題