Múltiplas transições CSS
-
26-12-2019 - |
Pergunta
Estou tentando fazer várias transições em um estado de foco.
Quero que a imagem primeiro gire para o saiu por 20 graus, depois de volta ao início e depois ao certo por volta dos 20 graus.
Eu tentei:
-webkit-transform: rotate(20deg, -20deg);
e
-webkit-transform: rotate(20deg);
-webkit-transform: rotate(-20deg);
Seria melhor usar um antes/depois?
desde já, obrigado
Solução
CSS3 Animação de quadro-chave seriam mais adequados para fazer esse efeito, pois permitem definir vários estados e animar entre esses estados.
A demonstração a seguir gira a imagem 20 graus para a esquerda e, em seguida, volta ao estado normal, pausa e gira 20 graus para a esquerda.A animação é iniciada ao passar o mouse.
.whatWeDo img {
margin:9% 0;
height: 102px;
width: 100px;
}
.whatWeDo img:hover {
-webkit-animation: rotation 4s;
animation: rotation 4s;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-20deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(20deg);}
}
@-keyframes rotation {
0% { transform: rotate(0deg);}
25% { transform: rotate(-20deg);}
50% { transform: rotate(0deg);}
75% { transform: rotate(0deg);}
100% { transform: rotate(20deg);}
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow