Перехода от одной анимации к другим

Question

Итак, простой вопрос:

У меня есть элемент, который имеет анимацию в своем нормальном состоянии - анимация преобразования, (perspective, rotateX и rotateZ - но только rotateZ изменения), которая работает постоянно. On :hover Я хочу изменить эту анимацию (удалите rotateX и perspective преобразование, но сохраните анимацию rotateZ) - это не проблема, но я хочу, чтобы переход анимации в новую анимацию и я понятия не имею, как это сделать.

JSFiddle

от:

@-webkit-keyframes rotatespace { 
    0% { 
    transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(0deg) scale(1.25); 
    } 
    100% { 
    transform:perspective(555px) rotateX(55deg) rotateY(0deg) rotateZ(360deg) scale(1.25); 
    } 
} 

к:

@-webkit-keyframes rotateflat { 
    0% { 
    transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.25); 
    } 
    100% { 
    transform:perspective(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale(1.25); 
    } 
} 

Answer 1

Вместо применения всех преобразований стилей для одного элемента можно использовать элемент :before псевдокода для анимационного блока и самого элемента для эффекта «3D» (rotateX).

Пример:

.block { 
 
    position: absolute; 
 
    top:100px; 
 
    left:100px; 
 
    width: 100px; 
 
    height:100px; 
 
    transform-origin: center center 0px; 
 
    overflow:visible; 
 
    transform:perspective(555px) rotateX(55deg) scale(1.25); 
 
    transition:transform .5s; 
 
} 
 
.block:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: blue; 
 
    animation-name: rotatespace; 
 
    animation-duration: 15s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: reverse; 
 
    animation-timing-function: linear; 
 
} 
 
.block:hover { 
 
    transform:perspective(555px) rotateX(0deg) scale(1.25);  
 
} 
 
@keyframes rotatespace { 
 
    0% { 
 
     transform:rotateZ(0deg); 
 
    } 
 
    100% { 
 
     transform:rotateZ(360deg); 
 
    } 
 
}

<div class="block"></div>