Você não está conectado. Conecte-se ou registre-se

[Tutorial] Animações - Iniciante - CSS3

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

waghcwb

avatar
Membro elite

Olá,

Hoje vamos ter nosso primeiro contato com animações básicas no CSS3,

Vejam o exemplo:
http://jsbin.com/hibaq/1

Algo bem básico só para entendermos a lógica por trás do código...




Animações CSS3 são feitas através da propriedade
@keyframes
que tem um uso bem simples, vejam:
Código:
@keyframes nome-da-animacao{
    0%{
        propriedade: valor;
    }
    100%{
        propriedade: valor;
    }
}

Código:
#elemento{
    animation: nome-da-animacao 1s infinite;
}

Criando sua primeira animação

Como ja vimos a sintaxe do
@keyframes
podemos avançar um pouquinho mais, vamos fazer uma animação que troca a cor da fonte de um elemento, primeiro vamos declarar a sintaxe básica:
Código:
@keyframes color{
    0%{
        color: #00aaff;
    }
}

Mas não queremos que a animação fique só nessa cor né? Vamos adicionar mais "steps" a ela:
Código:
@keyframes color{
    0%{
        color: #00aaff;
    }
    50%{
        color: #ff00fc;
    }
    100%{
        color: #ff8a00;
    }
}

Tudo que fizemos foi falar ao CSS assim, "olhe CSS, por favor, no inicio da minha animação quero que meu elemento tenha essa cor, em 50% da animação quero que tenha essa cor e quando finalizar e chegar aos 100%, por favor coloque essa cor para mim"

Simples né?

Então vamos testar, crie uma página HTML com este conteúdo:
Código:
<style type="text/css">
@keyframes color{
    0%{
        color: #00aaff;
    }
    50%{
        color: #ff00fc;
    }
    100%{
        color: #ff8a00;
    }
}
</style>

Agora execute ela no seu navegador...



Não funcionou não é?

É claro gente, temos que criar nosso elemento para ser estilizado, vamos lá:
Código:
<style type="text/css">
@keyframes color{
    0%{
        color: #00aaff;
    }
    50%{
        color: #ff00fc;
    }
    100%{
        color: #ff8a00;
    }
}
</style>
<h1>Meu texto lindo</h1>

Legal, tenho um texto, mas ele não muda de cor, e agora?

Simples também, temos que aplicar essa animação que criamos ao elemento
Código:
<style type="text/css">
@keyframes color{
    0%{
        color: #00aaff;
    }
    50%{
        color: #ff00fc;
    }
    100%{
        color: #ff8a00;
    }
}
h1{
    animation: color 1s infinite;
}
</style>
<h1>Meu texto lindo</h1>

E agora? Funciona legal né?

Provavelmente não, mas o que fizemos de errado?

Volte ao código e cheque se tem algo errado...




Encontrou algo? Não? Infelizmente não temos um consenso na internet que diz "olha agora essa propriedade estará disponível a todos", cada browser adiciona as propriedades que bem entender, por isso nem todos os navegadores dão suporte nativo as funções.

Seu navegador se encontra entre esses? Então nós vamos ter que apelar com ele, vamos usar algo chamado prefixos, que no geral são estes:
-webkit-
,
-moz-
e
-o-


Existem outros, mas esses 3 quase sempre resolvem nossos problemas que são para os 3 navegadores mais usados Google Chrome (webkit), Mozilla FF (moz) e Opera (o)

Vamos adicionar os prefixos ao nosso código então?
Código:
<style type="text/css">
@keyframes color{
    0%{
        color: #00aaff;
    }
    50%{
        color: #ff00fc;
    }
    100%{
        color: #ff8a00;
    }
}
@-webkit-keyframes color{
    0%{
        color: #00aaff;
    }
    50%{
        color: #ff00fc;
    }
    100%{
        color: #ff8a00;
    }
}
@-moz-keyframes color{
    0%{
        color: #00aaff;
    }
    50%{
        color: #ff00fc;
    }
    100%{
        color: #ff8a00;
    }
}
@-o-keyframes color{
    0%{
        color: #00aaff;
    }
    50%{
        color: #ff00fc;
    }
    100%{
        color: #ff8a00;
    }
}
h1{
    animation: color 1s infinite;
    -webkit-animation: color 1s infinite;
    -moz-animation: color 1s infinite;
    -o-animation: color 1s infinite;
}
</style>
<h1>Meu texto lindo</h1>

Agora seu texto deve estar funcionando bem, não?

Mas vejam como o código ficou grande e feio, vamos ter que deixar assim?

Infelizmente sim! Pelo menos até que essa propriedade seja suportada nativamente nos navegadores...

É o preço que pagamos por querer ser legais e usar as coisas mais modernas


Propriedades

Existem diversas propriedades que podemos usar, vejam elas separadamente aqui:
Código:
.elemento{
     animation-name: bounce;
     animation-duration: 4s;
     animation-iteration-count: 10;
     animation-direction: alternate;
     animation-timing-function: ease-out;
     animation-fill-mode: forwards;
     animation-delay: 2s;
}

Vamos deixar a explicação de cada um para um tópico mais avançado, ok?

É possível adicionar várias animações em um só elemento também, basta brincar um pouco com o que aprendemos Very Happy




Legal, aprendemos a sintaxe básica de animações CSS e como aplica-las a todos os navegadores, agora basta tomar um pouquinho de tempo e fazer uma busca na internet para deixar nossos conhecimentos mais sólidos Very Happy

Suporte dos browsers
Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

Referências
http://caniuse.com/#feat=css-animation
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations


Espero que seja útil a todos vocês! Abraços e até a próxima...



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário
Compartilhar este artigo em: BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahoo!Smarking

Bom Topico Wagner Very Happy .. .. ..

avatar

Mensagem em Seg Set 22, 2014 11:47 am por lil

great job on this tutorial. Now I see how Square-Enix uses animate coding on it's website

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum