Question

When I click a button, I wanna do some things listed below using HTML5 and CSS3. But I don’t know how can I achieve these things at the same time.

When I click a button:

Change element A’s CSS3 property -webkit-transform to rotateY(180deg) in 1 second (using -webkit-transition:-webkit-transform 1s;)

Change element A’s CSS3 property -webkit-transform to scale(0.8) in 0.5 second (using -webkit-transition:-webkit-transform 0.5s;). Then change element A’s CSS3 property -webkit-transform back to scale(1) in 0.5 second (using -webkit-transition:-webkit-transform 0.5s;).

Are there any solutions about this issue?

Thank you!

Answer 1

You’d have to use animation rather than 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.