Как я уже упоминал в своем комментарии, не никакого способа для достижения этой цели с помощью только одной анимации. Я бы не назвал ваш первоначальный подход hacky, потому что внезапное изменение означает добавление нового ключевого кадра сразу после предыдущего (50% и 51%), но я как бы понимаю, что вы хотите сказать.
Одним из возможных Альтернативой является использовать два анимации - один для преобразования, а другой для изменения спектрально происхождения. Здесь мы можем сделать вторую анимацию (изменение трансформации) самостоятельно, используя функцию синхронизации steps (или step-end), чтобы это изменение происходило внезапно.
(Примечание:. я обеспечиваю эту опцию только в качестве ответа на ваш вопрос, я бы до сих пор предпочитают более ранний подход и избегать наличия двух различных правил ключевых кадров для выполнения той же анимации.)
Ниже приведен пример фрагмент кода:
.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">
Как о чем-то вроде [это] (http://jsfiddle.net/p7 pswnpq/2 /), используя две анимации и функцию «шагов» для анимации начала? Я не думаю, что это возможно только с одним. – Harry
Почему это считается хаки? – Louis
@Harry Спасибо! Это именно то, что я искал! [Луис, я считаю это взломанным, потому что это не обходное решение) – artiestie