Question

this is my css to do animation.

transform: scale(0) rotateY(180deg);

I have to give separate transition-timing-function for scale and rotate. But as per my research, i am able to give like below only, which actually gives same easing function for scale and rotate.

transition: transform .7s ease-in-out;

Any one knows to give separate timing function for scale and rotate.

Answer 1

you can crate multiple animations, the first one would scale and the second would rotate, and assign different easing duration to each of them. multiple animations can then be assigned to a single element.

see this guide http://css-tricks.com/snippets/css/keyframe-animation-syntax/ on how to implement this

quote from the link:

Multiple animations –
You can comma-separate the values to declare multiple animations on a selector.

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}