Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

waghcwb waghcwb  • Dom 21 Set 2014 - 17:40

[Tutorial] Animações - Iniciante - CSS3 Empty [Tutorial] Animações - Iniciante - CSS3 Dom 21 Set 2014 - 17:40

Reputação da mensagem: 100% (1 votos)
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 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
[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...

Release's Release's  • Dom 21 Set 2014 - 18:04

lil lil  • Seg 22 Set 2014 - 11:47

Conteúdo patrocinado  • 

[Tutorial] Animações - Iniciante - CSS3 Empty Re: [Tutorial] Animações - Iniciante - CSS3

Permissões neste sub-fórum
Não podes responder a tópicos