+ Almentar o tamanho da fonte- Diminuir o tamanho da fonteCompartilharEditar postagemComentar essa postagemLink para esta postagem Animation e keyframes (Avançado)

Depois de muito procurar na internet, não achei um tutorial bom que ensinasse a mexer com "-webkit-animation", então decidi fazer um eu mesmo para ensinar melhor aos alheios com esse tipo de propriedade.

Este tutorial se destina a web designers que tenham um conhecimento um pouco avançado ou que queiram aprender sobre animations. Mais qualquer pessoa pode aprender mais sobre esse atributo.

Descrição

Com o "-webkit-animation", podemos criar animações, que podem substituir imagens animadas, animações em Flash, e JavaScripts em muitas páginas da web.

Para criar animações em CSS3, você vai ter que aprender sobre a regra @ keyframes.

A regra @ keyframes é onde a animação é criada. Especifique um estilo CSS dentro da regra @ keyframes e a animação irá mudar gradualmente a partir do estilo atual para o novo estilo.

Prefixo

Para começar, primeiramente claro que temos que colocar um prefixo de animation. No Firefox é prefixo o "-moz-", Chrome e Safari usam o prefixo "-webkit-", Opera requer o prefixo "-o-" e ainda existe um outro que é "-ms-", mais eu não sei de qual é o navegador.

Exemplo: @-webkit-keyframes roll /* Safari e Chrome */ { 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes roll /* Firefox */ { 100% {-moz-transform: rotate(360deg);} } @-o-keyframes roll /* Opera */ { 100% {-o-transform: rotate(360deg);} } @-ms-keyframes roll { 100% {-ms-transform: rotate(360deg);} } @keyframes roll { 100% {transform: rotate(360deg);} }

No exemplo eu coloquei um uma animação de rotação.

Agora nós criamos uma classe que irá receber a animação, e na classe especificamos o nome do que demos no @ keyframes (no caso "roll") e também colocamos o duração da animação.

Exemplo: div { -webkit-animation: roll 5s; /* Safari e Chrome */ -moz-animation: roll 5s; /* Firefox */ -o-animation: roll 5s; /* Opera */ -ms-animation: roll 5s; animation: roll 5s; }

Nota: Você deve definir o nome e a duração da animação. Se a duração for omitida, a animação não vai funcionar, porque o valor padrão é 0.

Avançado

Ainda existe outras propriedades que podem ajudar na hora de especificar a animação.

div { /* Chrome e Safari: */ -webkit-animation-name: roll; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; /* Firefox: */ -moz-animation-name: roll; -moz-animation-duration: 5s; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-play-state: running; /* Opera: */ -o-animation-name: roll; -o-animation-duration: 5s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; /* Opera: */ -o-animation-name: roll; -o-animation-duration: 5s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; -ms-animation-name: roll; -ms-animation-duration: 5s; -ms-animation-timing-function: linear; -ms-animation-delay: 2s; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; -ms-animation-play-state: running; animation-name: roll; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } A mesma animação que a de acima, utilizando a propriedade de animação abreviada: -webkit-animation: roll 5s linear 2s infinite alternate; -moz-animation: roll 5s linear 2s infinite alternate; -o-animation: roll 5s linear 2s infinite alternate; -ms-animation: roll 5s linear 2s infinite alternate; animation: roll 5s linear 2s infinite alternate;

Propriedade	Descrição	Padrão
animation	Uma propriedade abreviação para todas as propriedades de animação, com exceção da propriedade de animation-play-state
animation-name	Especifica o nome da animação @ keyframes	0
animation-duration	Especifica quantos segundos ou milissegundos uma animação leva para completar um ciclo.	0
animation-timing-function	Descreve como a animação vai avançar mais um ciclo de sua duração.	ease
animation-delay	Especifica quando a animação vai começar.	0
animation-iteration-count	Especifica o número de vezes que uma animação é reproduzida.	1
animation-direction	Especifica se ou não a animação deve jogar no reverso em ciclos alternados.
animation-play-state	Especifica se a animação está em execução ou em pausa.

Exemplo: <!DOCTYPE html> <html> <head> <title>Demo: animation - Wikiblogs</title> <style type="text/css"> .Ftc { width: 100px;height: 100px;background: red;-webkit-animation: roll 5s linear 1s infinite alternate;-moz-animation: roll 5s linear 1s infinite alternate;-o-animation: roll 5s linear 1s infinite alternate;-ms-animation: roll 5s linear 2s infinite alternate;animation: roll 5s linear 2s infinite alternate;} @-webkit-keyframes roll { 100% {-webkit-transform: rotate(360deg);}} @-moz-keyframes roll { 100% {-moz-transform: rotate(360deg);}} @-o-keyframes roll { 100% {-o-transform: rotate(360deg);}} @-ms-keyframes roll { 100% {-ms-transform: rotate(360deg);}} @keyframes roll{ 100% {transform: rotate(360deg);}} </style> </head> <body> <div class="Ftc"></div> </body> </html>

Bom, é isso. Alguma dúvida ou pergunta, deixe em um comentário.