Transition in animation???

Question

Can we use transition or transform property in animation???
I wrote a code,,

transition: transform 1000ms ease in 200ms;
transform: rotateX (360deg);

But it doesn't work🙄,,why??
I tried the above code inside animation,,it gave same result..

Answer 1

Airree it doesn't work🙄
https://code.sololearn.com/WQ0jgl1X1ME7/?ref=app

Answer 2

Thanks Airree 😊😊

Answer 3

Airree No,I didn't use hover ,,so the transition should play after delay timing,,but it's not,,

Answer 4

For that, you should use an animation.

@keyframes rotate {
0% {
rotateX(0deg);
}
100% {
rotateX(360deg);
}
}

.class {
/*PROPERTIES*/
animation: rotate <duration> linear|ease|... <delay> <number of execution (probably 1)>

Answer 5

That's because I messed up, you should do the animation like this:

0% {
transform: rotateX(0deg);
}
...

Answer 6

I dont know if you made an action, but I think you messed up.
The transition is instantly completed.

.yourClass:hover {
transform: rotateX(360deg);
}