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.
DescriçãoCom 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.
PrefixoPara 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;
}
AvançadoAinda 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. |
<!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.
