segunda-feira, 18 de outubro de 2010

HTML 5 CSS 3 - Animação com Quadros(keyframes) e transition




Olá mais uma vez o assunto é HTML5 gostaria de apresentar algo mais complexo mas assim como muitos ou todos estou em fase de aprendizado e devido a escassês de informações consegui somente alguns efetos basicos utilizando HTML5, CSS3 e um pouco de javascript para produzir o efeito desse texto eu utilizei o seguinte CSS
/*Aqui nós criamos a animação com o nome  apresentacao vale lembrar que os quadros da função keyframes é definido pelo tempo primeiro nós declaramos quais os atributos iniciais do frame logo depois definimos os atributos que o elemento deve conter ao chegar a certa percentagem(de tempo). Exemplo: se a animação durar 10 segundos quando tivermos em 30% logicamente vamos estar em 3 segundos*/
@-webkit-keyframes apresentacao {
 from {
   -webkit-transform: rotateY(-180deg) rotateX(-180deg);
   margin-top:170px;
 }
 30%{
  margin-top:-300px;
  -webkit-transform: rotateY(-180deg) rotateX(-180deg);
 }
 50%{
  margin-top:-300px;
 }
 100% {
   margin-left:0px;
   margin-top:0px;
   -webkit-transform: rotateZ(0deg);
 }
}
Agora só falta criar uma forma de chamar a apresentação então criei uma classe CSS
.apresentacao{
  -webkit-animation-name: apresentacao; /*Declaro qual apresentação vou chamar ao utilizar a classe */
  -webkit-animation-duration: 8s;/*quanto tempo ela deve durar */
  -webkit-animation-iteration-count: 1; /* quantidade de loops(repetições) */
  -webkit-animation-timing-function: ease-in-out; /*Mais detalhes */
  -webkit-animation-direction: alternate; /*Mais detalhes */
}
Coloquei somente os dois link's porque acho que são os unicos precise de Mais detalhes
Abaixo mais alguns efeitos =D

Click aqui para ver tudo.
Para produzir esse efeito basta utilizar esta CSS
.EsconderTexto{
   opacity: 1;
 -webkit-transition-property: width,
  height;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  border: 2px solid #000;
  width: 170px;
  height:20px;
  overflow:hidden;
}
e esse script
<script>if(addEventListener){
 ob = document.querySelector('#texto');
 ob.addEventListener('click', function () {
  if(ob.style.width != "500px"){
   ob.style.width="500px";
   ob.style.height="550px";
  }
  else{
   ob.style.width="170px";
   ob.style.height="20px";   
  }
  }, true);
}
</script>
Forma de Uso
<div id="texto" class="EsconderTexto" >
 escrever aqui o seu texto
    </div>


Passe o mouse para desbotar o elemento
CSS
.desbotar {
  opacity: 1;
  -webkit-transition: opacity 2s linear;
}

.desbotar:hover {
  opacity: 0.2;
}
Bom com isso ja da pra se ter uma noção do que esta por vir

Nenhum comentário:

Postar um comentário

Related Posts with Thumbnails