É possível definir diferentes duração/atraso para opções de transformação?

Question

Quero definir várias opções de transformação para o meu objeto HTML, mas com duração e atraso diferentes.

Se eu tentar usar algo assim:

-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

Então terei uma função de tempo diferente para transformação e opacidade, mas posso definir opções diferentes para girar e escalar, por exemplo, girar para 10s e escala 20s?

Answer 1

Provavelmente não diretamente, mas o mesmo efeito pode ser alcançado por elementos de nidificação.

Answer 2

Sim, você pode fazer isso diretamente com as animações CSS3. Se você tem uma transformação de opacidade de 0 a 1 que dura 20 segundos e uma rotação de 90 graus que dura 10 segundos, você cria um quadro de chave a 10 segundos com opacidade .5 e rotação 90 graus e outro quadro de chave a 20 segundos com opacidade 1 e rotação 90 graus. É uma espécie de dor, mas funcionará. Nestar Divs é um pouco mais limpo (como Doug diz acima)

Ok, aqui está o código:

@-webkit-keyframes foo {
 0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0;
 }
 50% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0.5;
 }

 100% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
 }

E você colocaria

-webkit-animation-duration: 20s;

no seu HTML.

Answer 3

Isso seria um problema para fazê -lo como Doug disse se você tiver uma perspectiva 3D em sua animação. Provavelmente você pode usar o "estilo de transformação: preserve-3d", mas não funciona no IE 10-11 e funciona estranho em todos os outros navegadores, o Firefox. Portanto, a única solução que eu acho é usar as animações CSS3. No seu caso, seria:

@-webkit-keyframes rotate_scale {

    0% {
        -webkit-transform: rotate(0deg) scale(0);
     }
     50% {
        -webkit-transform: rotate(90deg) scale(0);
     }
     100% {
        -webkit-transform: rotate(180deg) scale(2);
     }
}
@keyframes rotate_scale {

    0% {
        transform: rotate(0deg) scale(0);
     }
     50% {
        transform: rotate(90deg) scale(0);
     }
     100% {
        transform: rotate(180deg) scale(2);
     }
}

Assim, você pode definir a maior duração de suas transformações. Por exemplo, 20 segundos para rotação: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; E então apenas calcule quando sua outra transformação começará. Na escala do exame começa em dez segundos após a rotação. Portanto, seria metade do tempo integral (50%). E duraria 10 segundos, até o final do tempo integral (100%). Mas se você quiser fazer a duração da escala 5 segundos, por exemplo, precisará adicionar um novo quadro de chave 75% { transform: rotate(135deg) scale(2); } e escreva lá dois transforma.