Animações

Construindo

Criar uma animação é criar uma lista do que deve acontecer com as propriedades de um elemento em um determinado período de tempo. Há dois passos que devem ser seguidos, primeiro criamos a animação, fazendo uso de um ou mais Keyframes:

Keyframe

Um keyframe deve dizer onde, quando, e como devem ocorrer modificações nas propriedades. Essa é a parte responsável por criar a linha do tempo das modificações em uma animação.

/* Criando um keyframe */
@keyframes animacao {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

Animation

Com o keyframe pronto, agora chamamos ele como valor na propriedade animation em um determinado elemento. Como valores, usamos o nome da animação, duração, função de tempo, atraso, contador da iteração, direção, e mais algumas coisas. Em outras palavras, é aqui que configuramos quando, como e até quando uma animação deve aparecer.

/* Adicionando o keyframe criado à animação */
.elemento {
    animation: animacao 1s infinite;
}