Usando keyframes

Monday - 10/12/2012 - 18:01

O keyframes não é nenhum bicho, ele é super fácil de se fazer. Não sabe o que é? Nós temos alguns exemplos de keyframes aqui! Esse tutorial é simples, e precisa de sua máxima atenção. Como eu disse no começo dessa postagem, ele é super fácil. 

Mas afinal, o que é keyframes? 

Keyframes é a junção de várias estilos de css em uma única div. Tendo hover ou não. Sendo infinito ou não, e assim vai…

O código principal é esse:

@keyframes nome da sua animação { 0%   { estilo em css; }  100% { estilo em css; }}

Agora vamos entender o código.

  • O 0% indicará o começo do efeito. Sempre pergunte a si mesmo, “O que o efeito fará no começo?”. Essa frase sempre ajuda.
  • Você pode adicionar outros números de porcentagem, 20%, 40%, 50%… Só não passe do 100% viu?
  • Em 100% será o final o final do efeito. Se faça a pergunta, “Como acabará o efeito?”
  • USE E ABUSE DO CSS3! São mais de 20 de formas de animação.
  • Você pode usar: width, height, color, background, o css em geral.
  • ABUSE DA SUA CRIATIVIDADE! Efeitos é o que não faltam certo?
Depois de personalizar o efeito a seu gosto, você precisará entender como colocar os efeitos na div, então vamos lá?
.tutorial{-animation: nome da sua animação velocidades alternate infinite ease;}
  • Em nome da sua animação, você vai mudar pelo me nome da sua animação (avá)
  • Em “velocidade” você vai por a velocidade, por exemplo: 1s;. Lembrando que quando menor o número, mais rápido o efeito fica.
  • O “infinite” vai definir se o efeito vai se repetir várias vezes ou não.  Se você não quer que o efeito se repita, não coloque o infinite.
  • E ease é o estilo da transição, você pode mudar o ease  or outras transições. Ele é sempre o mais usado, ele é o principal. Algumas são mais “macias” e outras já são mais “rigidas” Leia esse artigo e escolha sua transição. 
Para adicionar o efeito em vários navegadores, basta repetir o código trocando as seguintes iniciais.
  • -webkit-animation = Google Chrome e Safari;
  • -moz-animation = Mozilla Firefox;
  • -o-animation = Opera;
  • -ms-animation = Internet Explorer.
Vamos fazer um exemplo agora.
@-webkit-keyframes rota {0% {border: 4px solid #099;}50% { border: 4px solid #FF0;-webkit-transform: scale(0.2) translateX(3000%); -moz-transform: scale(0.2) translateX(3000%);-o-transform: scale(0.2) translateX(3000%);-ms-transform: scale(0.2) translateX(3000%)}65% { border: 4px solid #F00;}100% { border: 4px solid #0C3;-webkit-transform:scale(1.1) translateX(0%);-moz-transform:scale(1.1) translateX(0%);-ms-transform:scale(1.1) translateX(0%);-o-transform:scale(1.1) translateX(0%);}} @-moz-keyframes rota {0% {border: 4px solid #099;}50% { border: 4px solid #FF0;-webkit-transform: scale(0.2) translateX(3000%); -moz-transform: scale(0.2) translateX(3000%);-o-transform: scale(0.2) translateX(3000%);-ms-transform: scale(0.2) translateX(3000%)}65% { border: 4px solid #F00;}100% { border: 4px solid #0C3;-webkit-transform:scale(1.1) translateX(0%);-moz-transform:scale(1.1) translateX(0%);-ms-transform:scale(1.1) translateX(0%);-o-transform:scale(1.1) translateX(0%);}} @-ms-keyframes rota {0% {border: 4px solid #099;}50% { border: 4px solid #FF0;-webkit-transform: scale(0.2) translateX(3000%); -moz-transform: scale(0.2) translateX(3000%);-o-transform: scale(0.2) translateX(3000%);-ms-transform: scale(0.2) translateX(3000%)}65% { border: 4px solid #F00;}100% { border: 4px solid #0C3;-webkit-transform:scale(1.1) translateX(0%);-moz-transform:scale(1.1) translateX(0%);-ms-transform:scale(1.1) translateX(0%);-o-transform:scale(1.1) translateX(0%);}} @-o-keyframes rota {0% {border: 4px solid #099;}50% { border: 4px solid #FF0;-webkit-transform: scale(0.2) translateX(3000%); -moz-transform: scale(0.2) translateX(3000%);-o-transform: scale(0.2) translateX(3000%);-ms-transform: scale(0.2) translateX(3000%)}65% { border: 4px solid #F00;}100% { border: 4px solid #0C3;-webkit-transform:scale(1.1) translateX(0%);-moz-transform:scale(1.1) translateX(0%);-ms-transform:scale(1.1) translateX(0%);-o-transform:scale(1.1) translateX(0%);}}
  • Perceba que eu usei todas as variações de navegação. Tanto transição quando keyframe.
.oi{-webkit-animation: rota 3s infinite alternate;-moz-animation: rota 3s infinite alternate;-o-animation: rota 3s infinite alternate;-ms-animation: rota 3s infinite alternate;}
  • O nome rota no código informa o nome da minha animação. Eu coloquei o infinite para que o efeito se repetisse infinitamente. E o 3s é a velocidade do meu efeito.
Bom, o meu resultado foi esse. Ficou #fail
Se gostarem depois faço um tuto -q  É isso! Se não entendeu voa aqui na ask que eu te ajudo! Keyframes é fácil, só exige atenção e criatividade! Acho que deu pra entender kk e desculpa qualquer coisa rs agora é só se divertir e creditar ahaha <33 
 
  1. htmluv posted this