HTML5轉換和轉換效果。

Question

當我點擊一個按鈕時，我想用HTML5和CSS3來做下面列出的一些事情。但我不知道我怎麼能在同一時間。

當我點擊一個按鈕：以0.5秒1秒（使用-webkit-transition:-webkit-transform 1s;）

變元件A的CSS3屬性-webkit-transform到scale(0.8)

變元件A的CSS3屬性-webkit-transform到rotateY(180deg)（使用-webkit-transition:-webkit-transform 0.5s;）。然後在0.5秒內將元素A的CSS3屬性-webkit-transform更改回scale(1)（使用-webkit-transition:-webkit-transform 0.5s;）。

有沒有解決這個問題的方法？

謝謝！

Answer 1

你不得不使用animation，而不是轉換：

@-webkit-keyframes myAnimation{ 
    from { 
     -webkit-transform: rotate(0deg) scale(1); 
    } 
    50% { 
     -webkit-transform: rotate(90deg) scale(0.8); 
    } 
    to { 
     -webkit-transform: rotate(180deg) scale(1); 
    } 
} 


div { 
    -webkit-animation-duration: 1s; 
} 
div:hover { 
    -webkit-animation-name: myAnimation; 
    -webkit-transform: rotate(180deg) scale(1); 
} 

Here's a demo。