[Tutorial] Animações - Iniciante - CSS3

Olá,

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

Vejam o exemplo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

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é?

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] 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...

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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? [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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 [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


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

---

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

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

Referências
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


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

Na minha opinião acho que quem conseguir dominar neste caso o CSS3 juntamente com HTML penso que deve ter um futuro assegurado pelo menos em Portugal digo eu. Isto porque tudo nos tempos que correm gira em torno da Internet e então quem dominar CSS, HTML, Java , PHP etc acredito que terá um emprego quase garantido.

Bom post waghcwb Reputado!

Só aqui uma curiosidade já todos os browsers suportam css3? por exemplo se for utilizado neste fórum já iria ter algum efeito?

@Moonshine, não é certo fazer uma afirmação assim de se "CSS3 funciona em todos os browsers", acontece que o CSS3 tem um conjunto de novas funções, o mais certo seria você ver qual função especificamente do CSS3 você gostaria de usar e checar o suporte dela nos browsers aqui:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Por exemplo, a propriedade border-radius (cantos arredondados) funciona em todos os browsers modernos (com modernos não quero dizer só o usuários usar tal browser, mas também manter ele atualizado, [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] mas a propriedade gradient ainda não (funciona só com prefixos como mostrado no tutorial).

Resumindo, depende muito da situação e da propriedade

Abraços...

Não conhecia mesmo esta forma de animação.. Vou brincar um pouco com isto, dá para fazer coisas engraçadas

ainda nem css básico sei e ja via no css3 ás vezes sinto-me um nabo por não saber certas coisas e programaçao é uma delas.

@Moonshine Todos começamos por algum lugar amigo, todos fomos iniciantes algum dia! Eu ainda me lembro do primeiro shape que fiz no Photoshop coloquei um gradiente que baixei na internet e um chanfro e achei aquilo incrível, faz tempo que não mexo com Photoshop, mas eu fazia signs assim:

Não sei se ficou bacana ou não, mas eu enxerguei uma evolução enorme! Do que eu era pelo menos...

Lembro-me ainda da primeira vez que copiei um código de alguém, e da primeira vez que vi o quanto isso é ridículo e passei sempre fazer meus próprios códigos.

Então mano tudo que você precisa é não desistir, manter foco no teu objetivo que cedo ou tarde você vai alcançar o que quer, basta ter garra e dedicação.

Abraços...

é verdade todos começamos por um lado só que uns motivam-me mais para uma coisa que para outras e quanto a essa imagem feita em photoshop eu gostei bastante aqui no fórum também ha bons designers o sonic2099 faz muitos tutoriais.
mas o que devemos aprender primeiro? O css ou o html?

Ambas são chamadas de linguagens de marcação (e não programação como muitos falam), sem HTML, o CSS é totalmente inútil, já conferiu aquele tópico que fiz sobre tags? Então você deve começar sempre pelo HTML e ir evoluindo a outras linguagens.

Este site pode lhe ajudar
codecademy.com

Não esqueça de por em português...

Abraços....