Estou utilizando o macOS High Sierra para as implementações. Estou no tópico 8.9 Começando com keyframes em que se faz efeito de animação usando @keyframes
no código <h1>Bem vindo!</h1>
. Estou seguindo rigorosamente o que está no livro na parte de CSS que é:
h1 {
animation: appear 2s 0 linear;
}
@keyframes appear {
0% {
opacity: 0;
transform: scale(2);
}
70% {
opacity: 1;
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
O código acima funciona no IE (executando via máquina virtual no Virtual Box) e no Safari, já no Firefox, Chrome e Opera não consigo fazer funcionar. Já tentei repetir os comandos com o nome dos vendors -webkit-
, -moz-
, -ms-
, -o-
precedendo as propriedades e nada também. O que será que está errado?