Animação

OPÇÕES

Nome

Duração

SELECIONE PARA FILTRAR

função de temporização

SELECIONE PARA FILTRAR

Atraso

SELECIONE PARA FILTRAR

Direção

SELECIONE PARA FILTRAR

Modo de preenchimento

SELECIONE PARA FILTRAR

VISUALIZAR

CÓDIGO

Copie isso para o elemento pai..

animation: devtoolspro 2s ease 0s normal forwards;

Copie isso após o seletor acima.

@keyframes

devtoolspro

{

0%,

50%,

100% {

opacity: 1;

}

25%,

75% {

opacity: 0;

}

Utilização

Os Keyframes são usados em CSS animações para definir os estilos que um elemento terá em vários momentos. A regra @keyframes controla as etapas intermediárias em uma sequência de animação CSS definindo estilos para quadros-chave (ou waypoints) ao longo da sequência de animação. Isso dá mais controle sobre as etapas intermediárias da animação sequência do que transições. Você pode definir quadros-chave usando a regra @keyframes Depois de configurar o sincronização da animação, você precisa definir a aparência da animação. Isso é feito estabelecendo dois ou mais quadros-chave usando a regra @keyframes

Você pode testar esta propriedade com a nossa ferramenta.