Transition HTML5 et effet Transformer.

Question

Lorsque je clique sur un bouton, je veux faire certaines choses listées ci-dessous en utilisant HTML5 et CSS3. Mais je ne sais pas comment puis-je atteindre ces choses en même temps.

Lorsque je clique sur un bouton:

élément Change propriété CSS3 est un -webkit-transform-rotateY(180deg) en 1 seconde (en utilisant -webkit-transition:-webkit-transform 1s;)

élément de changement de propriété de CSS3 d'un -webkit-transform à scale(0.8) en 0,5 secondes (en utilisant -webkit-transition:-webkit-transform 0.5s;). Ensuite, modifiez la propriété CSS3 de l'élément A -webkit-transform en 0 seconde seconde (en utilisant -webkit-transition:-webkit-transform 0.5s;).

Y a-t-il des solutions à ce problème?

Merci!

Answer 1

Vous auriez à utiliser animation plutôt que des transitions:

@-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.