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。