Animações... e efeito Fade In só com CSS

Ao (re)publicar o artigo anterior, mencionei que me lembrei desse artigo ao procurar um efeito que queria colocar aqui no blogue ao mudar de página e também que se reparassem bem, já tinha implementado o efeito pretendido aqui neste blogue mas sem a utilização de javascript e muitas mexidas na codificação do blogue. Pretendo publicar o código desse efeito ao final deste artigo. :)

Mas já lá vamos... Primeiro, peço a vossa atenção (Ena! Até pareço um daqueles apresentadores de magias e tal... =D ) para a demonstração abaixo:

DEMONSTRAÇÃO

Olhem eu aqui a mexer-me! :D

Nota: O exemplo da animação acima em CSS, NÃO funciona no Internet Explorer 9 e versões anteriores.
Mas sejamos sinceros, quem é que ainda utiliza esses dinossauros? =D

Então se repararam na demonstração acima, temos dois exemplos de animação: Um (o da direita) é, tal como o titulo diz, uma imagem animada, e o exemplo da esquerda é totalmente montado em CSS (e um pouco de HTML).

Podem dizer: Ah, e tal... a imagem está um pouco diferente da outra coisa... mexe mais rápido, e coisa e tal...

E a isso eu respondo que ao criar a imagem em gif, poderia ter feito com que se apresentasse exactamente como o exemplo em CSS, mas isso iria criar um ficheiro gif um pouco mais pesado (seria necessário utilizar mais frames) e não achei que fosse algo essencial só para provar o meu ponto. x-P

Caso tenham curiosidade, abaixo publico o código HTML presente nos exemplos acima:

Ver Código



<div class='separator' style='clear: both; text-align: center;'><span style='clear: right; float: right; margin-bottom: 1em; margin-left: 1em;'><div class='captionimg' title='Isto é uma imagem (gif animado) '><img alt='gif animado' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nWYwG8h4hUUcjtjur3ZN-XTZsZyhCxjYcottJ3hZ2lhYYCIP6cQjHCE8o9d_Fi3Auxcjkg_1nLc1DpqSANKbgDv1FmifKUJyVilHnMXImudHynU47hMsydPVc9EVJeXzwJ1fENbAQ-4/s550/gif-animado-tst.gif' border='0' height='350' width='350' /></div></span>
</div>

<div class='captionimg' title='Isto NÃO é uma imagem (puro CSS)'><div id='animar'><div class='mover'>Olhem eu aqui a  mexer-me! <span>:D</span></div></div></div>

Ocultar Código

Não diz muito sobre o processo da animação, pois não? :D

Mas vamos falar sobre as Animações com CSS... O que é? Como é o processo?

Basicamente é animar a transição de um estilo CSS para outro num elemento HTML.

O processo de criar uma animação em CSS precisa de duas coisas: Um estilo descrevendo a animação e um conjunto de keyframes que indique o inicio e o fim da animação, bem como possivelmente em animações mais complexas, alguns pontos intermédios.

Quais as vantagens e desvantagens?

Para não sobrecarregar muito a massa cinzenta, deixo aqui 3 de cada:

Vantagens:

Funciona em todos os navegadores mais recentes, incluindo no Internet Exlorer a partir da versão 10 para cima.
Como não utiliza javascript, diminui o peso das páginas e consequentemente, o tempo de carregamento das mesmas.
Qualquer pessoa pode criar uma simples animação em CSS com alguns conhecimentos básicos, sem ser necessário ter nenhum conhecimento de javascript ou de codificação complicada.

Desvantagens:

NÃO funciona no Internet Explorer 9 e versões anteriores. (mas isso é realmente um desvantagem? :-` )
Para criar animações mais complexas, já é necessário ter um bom conhecimento de CSS bem como de codificação HTML.
Se tivermos mais do que um separador aberto em páginas onde existem animações, supostamente a animação pode parar ou reduzir a velocidade nos separadores que não estamos a visualizar... OK! Esta última não é bem uma desvantagem mas não me lembrei de mais nenhuma. :Z

Como eu realmente não sou um bom professor ou coisa que o valha... a melhor maneira que conheço de explicar alguma coisa que pode se tornar complicada, é com alguns exemplos:

Comecemos por criar um elemento em HTML, a que mais tarde iremos tentar fazer mexer-se:

DEMONSTRAÇÃO

Zuummmm!!! Vejam como eu passo rápido!


<h4>Zuummmm!!! Vejam como eu passo rápido!</h4>

Como podem reparar, trata-se de um simples titulo (h4) em HTML, sem nenhum estilo CSS ainda. E também para efeitos de demonstração, não irei colocar estilo nenhum além daqueles necessários à animação que é para não complicar muito a coisa.

E para começar, vamos dar um nome (name) à animação e uma duração(duration):

DEMONSTRAÇÃO

Zuummmm!!! Vejam como eu passo rápido!


h4 {
  animation-duration: 5s;
  animation-name: correr;
}

Como podem ver, nada acontece. Isso é porque ainda precisamos de colocar as keyframes, onde vamos colocar o mesmo nome (name) que definimos em animation-name antes:

DEMONSTRAÇÃO

Zuummmm!!! Vejam como eu passo rápido!


h4 {
  animation-duration: 5s;
  animation-name: correr;
}
@keyframes correr {
      from {
        margin-left:100%;
        width:300%
      }
      
      50% {
        font-size:130%;
        margin-left:25%;
        width:120%;
        color:lime;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

No exemplo acima, além do inicio e do fim da animação, ainda coloquei um ponto intermédio onde o tamanho da letra aumenta 130% e muda a cor de verde para a cor original. Caso não consigam ver a animação completa, actualizem a página neste ponto, isso acontece porque definimos em duração(duration) que a animação demore 5 segundos e termine.

Uma maneira que podemos utilizar quando colocamos animações abaixo da linha de leitura do monitor é atrasar o inicio da animação, com a opção animation-delay, em que colocamos o tempo em segundos que a animação vai demorar a iniciar. No exemplo abaixo coloquei dez segundos, por isso se demoraram mais tempo a chegar aqui, podem recarregar a página e esperar alguns segundos até a animação iniciar.

DEMONSTRAÇÃO

Zuummmm!!! Vejam como eu passo rápido!


h4 {
  animation-duration: 5s;
  animation-name: correr;
  animation-delay:10s;
}
@keyframes correr {
      from {
        margin-left:100%;
        width:300%
      }
      
      50% {
        font-size:130%;
        margin-left:25%;
        width:120%;
        color:lime;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

Para que uma animação esteja sempre em acção, precisamos definir quantas vezes a animação deve rodar antes de terminar, em animation-iteration-count. Se colocarmos infinite tal como no exemplo abaixo, significa que a animação está sempre em acção.

DEMONSTRAÇÃO

Zuummmm!!! Vejam como eu passo rápido!


h4 {
  animation-duration: 5s;
  animation-name: correr;
  animation-delay:5s;
  animation-iteration-count: infinite;
}
@keyframes correr {
      from {
        margin-left:100%;
        width:300%
      }
      
      50% {
        font-size:130%;
        margin-left:25%;
        width:120%;
        color:lime;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

Para terminar esta pequena demonstração básica, vamos dizer que queremos que a animação ande prá frente e pra trás... Podemos conseguir esse efeito utilizando animation-direction, embora esta opção ainda não funcione a 100% em TODOS os navegadores, os comandos básicos (normal e alternate) já são aceites pela maioria.

DEMONSTRAÇÃO

Zuummmm!!! Vejam como eu passo rápido!


h4 {
  animation-duration: 5s;
  animation-name: correr;
  animation-delay:5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes correr {
      from {
        margin-left:100%;
        width:300%
      }
      
      50% {
        font-size:130%;
        margin-left:25%;
        width:120%;
        color:lime;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

Uma última coisinha que vale a pena mencionar: Embora na maioria dos navegadores actuais já não ser necessário utilizar o prefixo atribuido para determinado navegador, em alguns casos ou em versões mais antigas ainda ocorre essa necessidade.

Vamos utilizar uma parte dos exemplos anteriores para demonstrar como utilizar os prefixos, com comentários relativo a cada navegador:


h4 {
  animation-duration: 5s; /* Sem prefixo, como já é actualmente aceite pela maioria dos navegadores mais recentes*/
  -moz-animation-duration: 5s; /* Com prefixo -moz-, relativo a algumas versões dos navegadores Mozilla ou seja o Firefox */
  -webkit-animation-duration: 5s; /* Com prefixo -webkit-, relativo principalmente ao Chrome e Safari mas também aceite por algumas versões do Opera e dispositivos moveis */
  -o-animation-duration: 5s; /* Com prefixo -o-, relativo a algumas versões do Opera */
  -ms-animation-duration: 5s; /* Este prefixo é raro, mas existe e é relativo a certas versões do Internet Explorer*/
}

Espero que tenha conseguido explicar de maneira facil de entender e que agora possam ver que criar animações em CSS não é nenhum bicho de sete cabeças e até pode ser divertido ir experimentando até acertarmos com aquele efeito que procurávamos. :V:

Deixo ainda uma tabela dos navegadores que aceitam as animações em CSS e qual o prefixo que devemos utilizar, se for o caso:

Propriedade
@keyframes	10.0	4.0 -webkit-	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-
animation	10.0	4.0 -webkit-	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

Mas para realmente terminar este artigo, que já vai bem longo, o que eu quero mesmo é mostrar algumas das mais fantásticas experiências com animação em CSS que já encontrei na Net. Se conhecem outras e quiserem partilhar aqui, podem deixar o link nos comentários.

E finalmente um experimento da autoria de Rishabh que reproduzo abaixo, e do qual podem ver o original aqui: Google Doodle in CSS - Follow Up.

Então que acham? As animações em CSS têm ou não possibilidades que ainda nem imaginamos? 8)

Ah, mas já ia terminar e ia-me esquecendo da promessa que fiz no inicio deste artigo. x:-s

Aqui fica então o código que utilizo neste blogue para dar um efeito fade similar ao demonstrado no artigo anterior, mas totalmente em CSS:

Ver Código


      body {
        background:#fff;
        margin:0;
        color:#333;
        font:x-small Georgia Serif;
        font-size/* */:/**/small;
        font-size: /**/small;
        text-align: center;
        animation: fadein 2.5s;
        -moz-animation: fadein 2.5s; /* Firefox */
        -webkit-animation: fadein 2.5s; /* Safari and Chrome */
        -o-animation: fadein 2.5s; /* Opera */
        position:relative;
      }
      @keyframes fadein {
        from {
          opacity:0;
        }
        to {
          opacity:1;
        }
      }
      @-moz-keyframes fadein { /* Firefox */
        from {
          opacity:0;
        }
        to {
          opacity:1;
        }
      }
      @-webkit-keyframes fadein { /* Safari and Chrome */
        from {
          opacity:0;
        }
        to {
          opacity:1;
        }
      }
      @-o-keyframes fadein { /* Opera */
        from {
          opacity:0;
        }
        to {
          opacity: 1;
        }
      }

Ocultar Código

Até Breve. :-F

Queres ler outro artigo ao calhas?

Comentários

2 Opiniões Deixa a tua também.

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Cagation4 de abril de 2020 às 05:23
ajudou ein... muito obrigado
ResponderEliminar
Respostas

Adicionar comentário

Coisas K Aprendi por Aí

Pesquisar neste blogue

Diferentes Estilos no Blogue