How to quickly change property in CSS animation without animation
Here's what I'm trying to figure out, but without using the 51% keyframe as a hacky way to implement the change transform-origin
. Here is the Fiddle Demo .
@keyframes spin {
0% {
transform-origin: 50% 0;
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
50% {
transform-origin: 50% 0;
transform: perspective(800px) rotateX(360deg) translateZ(0px);
}
51% {
transform-origin: 50% 100%; /* hacky way to instantly change transform-origin */
}
100% {
transform-origin: 50% 100%;
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
}
source to share
As I mentioned in my comment, it was not possible to achieve this with just one animation . I would not call your original approach a hacker because a sudden change means adding a new keyframe immediately after the previous one (50% and 51%), but I kind of understand what you mean.
One possible option is to use two animations - one to transform and the other to modify the transformation. Here we can make the second animation (transformation change) only with the sync function steps
(or step-end
) so that this change happens suddenly.
( Note: I am providing this as an answer to your question. I would prefer the earlier approach and not use two different keyframe rules to perform the same animation.)
Below is an example snippet:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
animation: spin 4s linear infinite, origin 4s step-end infinite;
transform-origin: 50% 0;
}
@keyframes spin {
0% {
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
50% {
transform: perspective(800px) rotateX(360deg) translateZ(0px);
}
100% {
transform: perspective(800px) rotateX(0deg) translateZ(0px);
}
}
@keyframes origin {
50% {
transform-origin: 50% 100%;
}
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
source to share