Olá, trago mais um tutorial de desenvolvimento web, hoje sobre animação em CSS
Pra começar vamos programar a animação usando o @keyframes, assim:
Dentro de <style></style> coloque isso:
Como pode perceber o keyframes é definido por porcentagem, usei como exemplo as porcentagens 0, 25, 50, 75 e 100.
Assim, você trabalha com os efeitos de acordo com a porcentagem definida para a mudança.
Agora criamos o elemento que recebe a animação, no caso uma div:
Entre as tags <body> e </body> coloque:
Voltamos para o CSS e adicionamos o elemento, já fazendo a chamada da animação, assim:
* timing_function é uma forma de tratamento do tempo, como "linear" que faz tudo fluir sem efeito de tempo, ou "ease-in" que faz um efeito de freeze no tempo e volta com aceleração no fim da animação.
Agora vamos preencher os valores da animação e definir um estilo para "div":
E a partir disso programar a animação
O resultado você Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...
Este é só um exemplo de animação, dá pra se fazer coisas incríveis com esse método.
Pra começar vamos programar a animação usando o @keyframes, assim:
Dentro de <style></style> coloque isso:
Código:
@keyframes nome_da_animacao{ 0%{ } 25%{ } 50%{ } 75%{ } 100%{ } }
Assim, você trabalha com os efeitos de acordo com a porcentagem definida para a mudança.
Agora criamos o elemento que recebe a animação, no caso uma div:
Entre as tags <body> e </body> coloque:
Código:
<div></div>
Código:
div{ animation: nome_da_animacao duracao timing_function* delay contagem direcao }
Agora vamos preencher os valores da animação e definir um estilo para "div":
Código:
div{ background: #fff; width: 15px; height: 15px; margin: 2em; border: 10px solid #8ac; box-shadow: 0 0 0 10px #f00; border-radius: 100%; animation: mudamuda 0.7s linear 0.1s infinite alternate; }
Código:
@keyframes mudamuda{ 0%{ background: #f00; border: 10px solid #fff; box-shadow: 0 0 0 10px #8ac; } 25%{ background: #8ac; border: 10px solid #f00; box-shadow: 0 0 0 10px #fff; } 50%{ background: #fff; border: 10px solid #8ac; box-shadow: 0 0 0 10px #f00; } 75%{ background: #f00; border: 10px solid #fff; box-shadow: 0 0 0 10px #8ac ; } 100%{ background: #fff; border: 10px solid #8ac; box-shadow: 0 0 0 10px #f00; } }
Este é só um exemplo de animação, dá pra se fazer coisas incríveis com esse método.