I've found the origin of my issue.
The problem is that -webkit-
browsers don't accept the transform-origin
attribute when it is isolated from a supporting attribute (an attribute that actually uses the transform-origin
).
So, for example, if I use something like this, -webkit-
assumes it is wrong:
#divOne{
transform-origin:50% 50%;
animation:jump 1s ease both;
}
@keyframe jump{
from { transform: translateX(-20%) rotateY(-90deg); }
to{ transform: translateX(0%) rotateY(0deg); }
}
It is wrong because the origin
attribute is detached from the transform
that is going to take use of it. Even though it works, it is not entirely correct on the browser's perspective.
It should be something like this to be correct:
#divOne{
animation:jump 1s ease both;
}
@keyframe jump{
from { transform: translateX(-20%) rotateY(-90deg); transform-origin:50% 50%; }
to{ transform: translateX(0%) rotateY(0deg); transform-origin:50% 50%; }
}
Where both transforms
are together on the same element.