HTML5 + CSS3 - Banner Animado

HTML5 + CSS3 - Banner Animado>

Fazer uma animação em CSS3 tornou-se uma boa ferramenta para substituir o Flash que não roda em plataforma Mac , como por exemplo, no iPad.

Neste tutorial, vamos criar um banner animado que consiste em dois componentes : o seletor CSS e um conjunto de quadros-chave ( @keyframes ) que indicam o início e estados finais da animação.

Como configurar a animação

Para criar uma animação CSS, use a propriedade animation ou suas sub-propriedades usando @keyframes

As sub-propriedades da propriedade animation :

Definição do quadro-chave

Preciso definir o quadro-chave ( @keyframes ) da animação e sua duração para dar suporte a todos os navegadores diferentes :

HTML

  1. <!DOCTYPE html>  
  2. <html lang="pt-BR">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Banner Animado</title>  
  6.     <link href="http://fonts.googleapis.com/css?family=Gudea" rel="stylesheet" type="text/css">  
  7.     <link href="css/estrutura_banner.css" rel="stylesheet" type="text/css">  
  8.     <link href="css/animation.css" rel="stylesheet" type="text/css">  
  9. </head>  
  10. <body>  
  11.   
  12. <div class="wrapper">  
  13.     <img src="imagens/baloes.png" alt="Balões" class="animar01">  
  14.     <img src="imagens/peixe.png" alt="Peixe" class="animar02">  
  15.     <img src="imagens/cantores.png" alt="Cantores" class="animar03">  
  16.   
  17.     <div class="texto01">  
  18.         Verão 2013  
  19.     </div>  
  20.   
  21.     <div class="corpoTexto">  
  22.         Venha participar  
  23.   
  24.         desta Festa em Ipanema  
  25.     </div>  
  26.   
  27.     <a class="btn" href="#">Veja Detalhes</a>  
  28. </div>  
  29. </body>  
  30. </html>  

Página HTML5

CSS - estrutura_banner.css

  1. @charset "utf-8";    
  2.   
  3. .wrapper {  
  4.     width: 960px;  
  5.     height: 400px;  
  6.     overflow: hidden;  
  7.     position: relative;  
  8.     display: block;  
  9.     background: url(../imagens/fundo_txan.jpg) no-repeat center;  
  10.     margin: 50px auto 0;  
  11.     padding: 0;  
  12. }  
  13. .texto01, .corpoTexto {  
  14.     font-family: 'Gudea', sans-serif;  
  15.     color: #FFF;  
  16.     z-index: 88;  
  17. }  
  18. .texto01, .corpoTexto {  
  19.     display: block;  
  20.     margin-left: 288px;  
  21. }  
  22. a.btn {  
  23.     display: block;  
  24.     margin-left: 500px;  
  25. }  
  26. .texto01 {  
  27.     font-size: 70px;  
  28.     margin-top: 90px;  
  29.     padding: 10px;  
  30.     background-color: #FFCC00;  
  31.     border-radius: 12px;  
  32.     width: 350px;  
  33. }  
  34. .corpoTexto {  
  35.     font-size: 34px;  
  36. }  
  37. a.btn {  
  38.     display: inline-block;  
  39.     color: #fff;  
  40.     font-family: Arial, sans-serif;  
  41.     font-size: 17px;  
  42.     font-weight: normal;  
  43.     padding: 5px 15px;  
  44.     text-shadow: -1px -1px 0px rgba(0,0,0,0.6);  
  45.     background-color: #FF3300;  
  46.     text-decoration: none;  
  47.     text-transform: uppercase;  
  48.     margin-top: 20px;  
  49.     z-index: 109;  
  50.     position: relative;  
  51.     cursor: pointer;  
  52.     -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);  
  53.     -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);  
  54.     -o-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);  
  55.     -ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);  
  56.     box-shadow: 2px 2px 2px rgba(0,0,0,0.5);  
  57. }  
  58. a.btn:hover {  
  59.     background-color: #FFCC00;  
  60. }  
  61. .animar01, .animar02, .animar03 {  
  62.     display: block;  
  63.     position: absolute;  
  64.     top: 0;  
  65.     left: 0;  
  66.     padding: 20px;  
  67.     z-index: 99;  
  68. }  

CSS - animation.css

  1. @charset "utf-8";  
  2. /* Configuração de cada Seletor */  
  3.   
  4. .animar01, .animar02, .animar03, .texto01, .corpoTexto, .btn, .wrapper {  
  5.     -webkit-animation-duration: 7s;  
  6.     -moz-animation-duration: 7s;  
  7.     -ms-animation-duration: 7s;  
  8.     -o-animation-duration: 7s;  
  9.     animation-duration: 7s;  
  10.     -webkit-animation-iteration-count: infinite;  
  11.     -moz-animation-iteration-count: infinite;  
  12.     -ms-animation-iteration-count: infinite;  
  13.     -o-animation-iteration-count: infinite;  
  14.     animation-iteration-count: infinite;  
  15.     -webkit-animation-timing-function: ease;  
  16.     -moz-animation-timing-function: ease;  
  17.     -ms-animation-timing-function: ease;  
  18.     -o-animation-timing-function: ease;  
  19.     animation-timing-function: ease;  
  20.     -webkit-animation-fill-mode: both;  
  21.     -moz-animation-fill-mode: both;  
  22.     -ms-animation-fill-mode: both;  
  23.     -o-animation-fill-mode: both;  
  24.     animation-fill-mode: both;  
  25. }  

CSS - animation.css ( classe animar01 )

  1.     /* Configurar animação da primeira imagem */  
  2.       
  3.     @-ms-keyframes animar01 {  
  4.  0% {  
  5.  opacity: 0;  
  6.  -ms-transform:  translateY(400px)  
  7. }  
  8.  28% {  
  9.  opacity: 0;  
  10.  -ms-transform:  translateY(400px)  
  11. }  
  12.  43% {  
  13.  opacity: 1;  
  14.  -ms-transform:  translateY(0px)  
  15. }  
  16.  100% {  
  17.  -ms-transform:  translateY(0px);  
  18. opacity: 1;  
  19. }  
  20. }  
  21.  @-webkit-keyframes animar01 {  
  22.  0% {  
  23.  opacity: 0;  
  24.  -webkit-transform:  translateY(400px)  
  25. }  
  26.  28% {  
  27.  opacity: 0;  
  28.  -webkit-transform:  translateY(400px)  
  29. }  
  30.  43% {  
  31.  opacity: 1;  
  32.  -webkit-transform:  translateY(0px)  
  33. }  
  34.  100% {  
  35.  -webkit-transform:  translateY(0px);  
  36. opacity: 1;  
  37. }  
  38. }  
  39.  @-moz-keyframes animar01 {  
  40.  0% {  
  41.  opacity: 0;  
  42.  -moz-transform:  translateY(400px)  
  43. }  
  44.  28% {  
  45.  opacity: 0;  
  46.  -moz-transform:  translateY(400px)  
  47. }  
  48.  43% {  
  49.  opacity: 1;  
  50.  -moz-transform:  translateY(0px)  
  51. }  
  52.  100% {  
  53.  -moz-transform:  translateY(0px);  
  54. opacity: 1;  
  55. }  
  56. }  
  57.  @-o-keyframes animar01 {  
  58.  0% {  
  59.  opacity: 0;  
  60.  -o-transform:  translateY(400px)  
  61. }  
  62.  28% {  
  63.  opacity: 0;  
  64.  -o-transform:  translateY(400px)  
  65. }  
  66.  43% {  
  67.  opacity: 1;  
  68.  -o-transform:  translateY(0px)  
  69. }  
  70.  100% {  
  71.  -o-transform:  translateY(0px);  
  72. opacity: 1;  
  73. }  
  74. }  
  75.  @keyframes animar01 {  
  76.  0% {  
  77.  opacity: 0;  
  78.  transform:  translateY(400px)  
  79. }  
  80.  28% {  
  81.  opacity: 0;  
  82.  transform:  translateY(400px)  
  83. }  
  84.  43% {  
  85.  opacity: 1;  
  86.  transform:  translateX(0px)  
  87. }  
  88.  100% {  
  89.  transform:  translateY(0px);  
  90. opacity: 1;  
  91. }  
  92. }  
  93. /* Adicionar Animação ao Seletor */  
  94.   
  95. .animar01 {  
  96.     -webkit-animation-name: animar01;  
  97.     -moz-animation-name: animar01;  
  98.     -ms-animation-name: animar01;  
  99.     -o-animation-name: animar01;  
  100.     animation-name: animar01;  
  101. }  
  102.           

CSS - animation.css ( classe animar02 )

  1.     /* Configurar animação da segunda imagem */   
  2.           
  3.     @-ms-keyframes animar02 {  
  4.  0% {  
  5.  opacity: 0;  
  6.  -ms-transform:  translateY(-400px)  
  7. }  
  8.  43% {  
  9.  opacity: 0;  
  10.  -ms-transform:  translateY(-400px)  
  11. }  
  12.  56% {  
  13.  opacity: 1;  
  14.  -ms-transform:  translateY(0px)  
  15. }  
  16.  100% {  
  17.  -ms-transform:  translateY(0px);  
  18. opacity: 1;  
  19. }  
  20. }  
  21.  @-webkit-keyframes animar02 {  
  22.  0% {  
  23.  opacity: 0;  
  24.  -webkit-transform:  translateY(-400px)  
  25. }  
  26.  43% {  
  27.  opacity: 0;  
  28.  -webkit-transform:  translateY(-400px)  
  29. }  
  30.  56% {  
  31.  opacity: 1;  
  32.  -webkit-transform:  translateX(600px)  
  33. }  
  34.  100% {  
  35.  -webkit-transform:  translateY(180px);  
  36. opacity: 1;  
  37. }  
  38. }  
  39.  @-moz-keyframes animar02 {  
  40.  0% {  
  41.  opacity: 0;  
  42.  -moz-transform:  translateY(-400px)  
  43. }  
  44.  43% {  
  45.  opacity: 0;  
  46.  -moz-transform:  translateY(-400px)  
  47. }  
  48.  56% {  
  49.  opacity: 1;  
  50.  -moz-transform:  translateX(600px)  
  51. }  
  52.  100% {  
  53.  -moz-transform:  translateY(180px);  
  54. opacity: 1;  
  55. }  
  56. }  
  57.  @-o-keyframes animar02 {  
  58.  0% {  
  59.  opacity: 0;  
  60.  -o-transform:  translateY(-400px)  
  61. }  
  62.  43% {  
  63.  opacity: 0;  
  64.  -o-transform:  translateY(-400px)  
  65. }  
  66.  56% {  
  67.  opacity: 1;  
  68.  -o-transform:  translateX(600px)  
  69. }  
  70.  100% {  
  71.  -o-transform:  translateY(180px);  
  72. opacity: 1;  
  73. }  
  74. }  
  75.  @keyframes animar02 {  
  76.  0% {  
  77.  opacity: 0;  
  78.  transform:  translateY(-400px)  
  79. }  
  80.  43% {  
  81.  opacity: 0;  
  82.  transform:  translateY(-400px)  
  83. }  
  84.  56% {  
  85.  opacity: 1;  
  86.  transform:  translateX(600px)  
  87. }  
  88.  100% {  
  89.  transform:  translateY(180px);  
  90. opacity: 1;  
  91. }  
  92. }  
  93. /* Adicionar Animação ao Seletor */  
  94.   
  95. .animar02 {  
  96.     -webkit-animation-name: animar02;  
  97.     -moz-animation-name: animar02;  
  98.     -ms-animation-name: animar02;  
  99.     -o-animation-name: animar02;  
  100.     animation-name: animar02;  
  101. }  

CSS - animation.css ( classe animar03 )

  1.     /* Configurar animação da terceira imagem */  
  2.       
  3.     @-ms-keyframes animar03 {  
  4.  0% {  
  5.  opacity: 0;  
  6.  -ms-transform:   translateX(760px)  
  7. }  
  8.  56% {  
  9.  opacity: 0;  
  10.  -ms-transform:   translateX(760px)  
  11. }  
  12.  71% {  
  13.  opacity: 1;  
  14.  -ms-transform:   translateX(400px)  
  15. }  
  16.  100% {  
  17.  -ms-transform:   translateX(680px);  
  18. opacity: 1;  
  19. }  
  20. }  
  21.  @-webkit-keyframes animar03 {  
  22.  0% {  
  23.  opacity: 0;  
  24.  -webkit-transform:   translateX(760px)  
  25. }  
  26.  56% {  
  27.  opacity: 0;  
  28.  -webkit-transform:   translateX(760px)  
  29. }  
  30.  71% {  
  31.  opacity: 1;  
  32.  -webkit-transform:   translateX(400px)  
  33. }  
  34.  100% {  
  35.  -webkit-transform:   translateX(680px);  
  36. opacity: 1;  
  37. }  
  38. }  
  39.  @-moz-keyframes animar03 {  
  40.  0% {  
  41.  opacity: 0;  
  42.  -moz-transform:   translateX(760px)  
  43. }  
  44.  56% {  
  45.  opacity: 0;  
  46.  -moz-transform:   translateX(760px)  
  47. }  
  48.  71% {  
  49.  opacity: 1;  
  50.  -moz-transform:   translateX(400px)  
  51. }  
  52.  100% {  
  53.  -moz-transform:   translateX(680px);  
  54. opacity: 1;  
  55. }  
  56. }  
  57.  @-o-keyframes animar03 {  
  58.  0% {  
  59.  opacity: 0;  
  60.  -o-transform:   translateX(760px)  
  61. }  
  62.  56% {  
  63.  opacity: 0;  
  64.  -o-transform:   translateX(760px)  
  65. }  
  66.  71% {  
  67.  opacity: 1;  
  68.  -o-transform:   translateX(400px)  
  69. }  
  70.  100% {  
  71.  -o-transform:   translateX(680px);  
  72. opacity: 1;  
  73. }  
  74. }  
  75.  @keyframes animar03 {  
  76.  0% {  
  77.  opacity: 0;  
  78.  transform:   translateX(760px)  
  79. }  
  80.  56% {  
  81.  opacity: 0;  
  82.  transform:   translateX(760px)  
  83. }  
  84.  71% {  
  85.  opacity: 1;  
  86.  transform:   translateX(400px)  
  87. }  
  88.  100% {  
  89.  transform:   translateX(680px);  
  90. opacity: 1;  
  91. }  
  92. }  
  93. /* Adicionar Animação ao Seletor */  
  94.   
  95. .animar03 {  
  96.     -webkit-animation-name: animar03;  
  97.     -moz-animation-name: animar03;  
  98.     -ms-animation-name: animar03;  
  99.     -o-animation-name: animar03;  
  100.     animation-name: animar03;  
  101. }  

CSS - animation.css ( classe texto01 )

  1.         /* Configurar animação do Texto */  
  2.           
  3.     @-ms-keyframes texto01 {  
  4.  0% {  
  5.  opacity: 0;  
  6.  -ms-transform:   translateX(-10px)  
  7. }  
  8.  7% {  
  9.  opacity: 0;  
  10.  -ms-transform:   translateX(-10px)  
  11. }  
  12.  21% {  
  13.  opacity: 1;  
  14.  -ms-transform:   translateX(0px)  
  15. }  
  16.  100% {  
  17.  -ms-transform:   translateX(0px);  
  18. opacity: 1;  
  19. }  
  20. }  
  21.  @-webkit-keyframes texto01 {  
  22.  0% {  
  23.  opacity: 0;  
  24.  -webkit-transform:   translateX(-10px)  
  25. }  
  26.  7% {  
  27.  opacity: 0;  
  28.  -webkit-transform:   translateX(-10px)  
  29. }  
  30.  21% {  
  31.  opacity: 1;  
  32.  -webkit-transform:   translateX(0px)  
  33. }  
  34.  100% {  
  35.  -webkit-transform:   translateX(0px);  
  36. opacity: 1;  
  37. }  
  38. }  
  39.  @-moz-keyframes texto01 {  
  40.  0% {  
  41.  opacity: 0;  
  42.  -moz-transform:   translateX(-10px)  
  43. }  
  44.  7% {  
  45.  opacity: 0;  
  46.  -moz-transform:   translateX(-10px)  
  47. }  
  48.  21% {  
  49.  opacity: 1;  
  50.  -moz-transform:   translateX(0px)  
  51. }  
  52.  100% {  
  53.  -moz-transform:   translateX(0px);  
  54. opacity: 1;  
  55. }  
  56. }  
  57.  @-o-keyframes texto01 {  
  58.  0% {  
  59.  opacity: 0;  
  60.  -o-transform:   translateX(-10px)  
  61. }  
  62.  7% {  
  63.  opacity: 0;  
  64.  -o-transform:   translateX(-10px)  
  65. }  
  66.  21% {  
  67.  opacity: 1;  
  68.  -o-transform:   translateX(0px)  
  69. }  
  70.  100% {  
  71.  -o-transform:   translateX(0px);  
  72. opacity: 1;  
  73. }  
  74. }  
  75.  @keyframes texto01 {  
  76.  0% {  
  77.  opacity: 0;  
  78.  transform:   translateX(-10px)  
  79. }  
  80.  7% {  
  81.  opacity: 0;  
  82.  transform:   translateX(-10px)  
  83. }  
  84.  21% {  
  85.  opacity: 1;  
  86.  transform:   translateX(0px)  
  87. }  
  88.  100% {  
  89.  transform:   translateX(0px);  
  90. opacity: 1;  
  91. }  
  92. }  
  93. /* Adicionar Animação ao Seletor */  
  94.   
  95. .texto01 {  
  96.     -webkit-animation-name: corpoTexto;  
  97.     -moz-animation-name: corpoTexto;  
  98.     -ms-animation-name: corpoTexto;  
  99.     -o-animation-name: corpoTexto;  
  100.     animation-name: corpoTexto;  
  101. }  
  102.       

CSS - animation.css ( classe corpoTexto )

  1.     /* Configurar animação ao Fundo do Texto */  
  2.       
  3.     @-ms-keyframes corpoTexto {  
  4.  0% {  
  5.  opacity: 0;  
  6.  -ms-transform:   translateX(-10px)  
  7. }  
  8.  14% {  
  9.  opacity: 0;  
  10.  -ms-transform:   translateX(-10px)  
  11. }  
  12.  28% {  
  13.  opacity: 1;  
  14.  -ms-transform:   translateX(0px)  
  15. }  
  16.  100% {  
  17.  -ms-transform:   translateX(0px);  
  18. opacity: 1;  
  19. }  
  20. }  
  21.  @-webkit-keyframes corpoTexto {  
  22.  0% {  
  23.  opacity: 0;  
  24.  -webkit-transform:   translateX(-10px)  
  25. }  
  26.  14% {  
  27.  opacity: 0;  
  28.  -webkit-transform:   translateX(-10px)  
  29. }  
  30.  28% {  
  31.  opacity: 1;  
  32.  -webkit-transform:   translateX(0px)  
  33. }  
  34.  100% {  
  35.  -webkit-transform:   translateX(0px);  
  36. opacity: 1;  
  37. }  
  38. }  
  39.  @-moz-keyframes corpoTexto {  
  40.  0% {  
  41.  opacity: 0;  
  42.  -moz-transform:   translateX(-10px)  
  43. }  
  44.  14% {  
  45.  opacity: 0;  
  46.  -moz-transform:   translateX(-10px)  
  47. }  
  48.  28% {  
  49.  opacity: 1;  
  50.  -moz-transform:   translateX(0px)  
  51. }  
  52.  100% {  
  53.  -moz-transform:   translateX(0px);  
  54. opacity: 1;  
  55. }  
  56. }  
  57.  @-o-keyframes corpoTexto {  
  58.  0% {  
  59.  opacity: 0;  
  60.  -o-transform:   translateX(-10px)  
  61. }  
  62.  14% {  
  63.  opacity: 0;  
  64.  -o-transform:   translateX(-10px)  
  65. }  
  66.  28% {  
  67.  opacity: 1;  
  68.  -o-transform:   translateX(0px)  
  69. }  
  70.  100% {  
  71.  -o-transform:   translateX(0px);  
  72. opacity: 1;  
  73. }  
  74. }  
  75.  @keyframes corpoTexto {  
  76.  0% {  
  77.  opacity: 0;  
  78.  transform:   translateX(-10px)  
  79. }  
  80.  14% {  
  81.  opacity: 0;  
  82.  transform:   translateX(-10px)  
  83. }  
  84.  28% {  
  85.  opacity: 1;  
  86.  transform:   translateX(0px)  
  87. }  
  88.  100% {  
  89.  transform:   translateX(0px);  
  90. opacity: 1;  
  91. }  
  92. }  
  93. /* Adicionar Animação ao Seletor */  
  94.   
  95. .corpoTexto {  
  96.     -webkit-animation-name: corpoTexto;  
  97.     -moz-animation-name: corpoTexto;  
  98.     -ms-animation-name: corpoTexto;  
  99.     -o-animation-name: corpoTexto;  
  100.     animation-name: corpoTexto;  
  101. }  

CSS - animation.css ( classe btn )

  1.     /* Configurar animação do Botão */  
  2.       
  3.     @-ms-keyframes btn {  
  4.  0% {  
  5.  opacity: 0;  
  6.  -ms-transform:   translateX(-10px)  
  7. }  
  8.  21% {  
  9.  opacity: 0;  
  10.  -ms-transform:   translateX(-10px)  
  11. }  
  12.  36% {  
  13.  opacity: 1;  
  14.  -ms-transform:   translateX(0px)  
  15. }  
  16.  100% {  
  17.  -ms-transform:   translateX(0px);  
  18. opacity: 1;  
  19. }  
  20. }  
  21.  @-webkit-keyframes btn {  
  22.  0% {  
  23.  opacity: 0;  
  24.  -webkit-transform:   translateX(-10px)  
  25. }  
  26.  21% {  
  27.  opacity: 0;  
  28.  -webkit-transform:   translateX(-10px)  
  29. }  
  30.  36% {  
  31.  opacity: 1;  
  32.  -webkit-transform:   translateX(0px)  
  33. }  
  34.  100% {  
  35.  -webkit-transform:   translateX(0px);  
  36. opacity: 1;  
  37. }  
  38. }  
  39.  @-moz-keyframes btn {  
  40.  0% {  
  41.  opacity: 0;  
  42.  -moz-transform:   translateX(-10px)  
  43. }  
  44.  21% {  
  45.  opacity: 0;  
  46.  -moz-transform:   translateX(-10px)  
  47. }  
  48.  36% {  
  49.  opacity: 1;  
  50.  -moz-transform:   translateX(0px)  
  51. }  
  52.  100% {  
  53.  -moz-transform:   translateX(0px);  
  54. opacity: 1;  
  55. }  
  56. }  
  57.  @-o-keyframes btn {  
  58.  0% {  
  59.  opacity: 0;  
  60.  -o-transform:   translateX(-10px)  
  61. }  
  62.  21% {  
  63.  opacity: 0;  
  64.  -o-transform:   translateX(-10px)  
  65. }  
  66.  36% {  
  67.  opacity: 1;  
  68.  -o-transform:   translateX(0px)  
  69. }  
  70.  100% {  
  71.  -o-transform:   translateX(0px);  
  72. opacity: 1;  
  73. }  
  74. }  
  75.  @keyframes btn {  
  76.  0% {  
  77.  opacity: 0;  
  78.  transform:   translateX(-10px)  
  79. }  
  80.  21% {  
  81.  opacity: 0;  
  82.  transform:   translateX(-10px)  
  83. }  
  84.  36% {  
  85.  opacity: 1;  
  86.  transform:   translateX(0px)  
  87. }  
  88.  100% {  
  89.  transform:   translateX(0px);  
  90. opacity: 1;  
  91. }  
  92. }  
  93. /* Adicionar Animação ao Seletor */  
  94.   
  95. .btn {  
  96.     -webkit-animation-name: btn;  
  97.     -moz-animation-name: btn;  
  98.     -ms-animation-name: btn;  
  99.     -o-animation-name: btn;  
  100.     animation-name: btn;  
  101. }  
  102.           

CSS - animation.css ( classe wrapper )

  1.         /* Configurar animação do Wrapper */   
  2.           
  3.     @-ms-keyframes wrapper {  
  4.  0% {  
  5.  opacity: 0;  
  6. }  
  7.  7% {  
  8.  opacity: 1;  
  9. }  
  10.  100% {  
  11.  opacity: 1;  
  12. }  
  13. }  
  14.  @-webkit-keyframes wrapper {  
  15.  0% {  
  16.  opacity: 0;  
  17. }  
  18.  7% {  
  19.  opacity: 1;  
  20. }  
  21.  100% {  
  22.  opacity: 1;  
  23. }  
  24. }  
  25.  @-moz-keyframes wrapper {  
  26.  0% {  
  27.  opacity: 0;  
  28. }  
  29.  7% {  
  30.  opacity: 1;  
  31. }  
  32.  100% {  
  33.  opacity: 1;  
  34. }  
  35. }  
  36.  @-o-keyframes wrapper {  
  37.  0% {  
  38.  opacity: 0;  
  39. }  
  40.  7% {  
  41.  opacity: 1;  
  42. }  
  43.  100% {  
  44.  opacity: 1;  
  45. }  
  46. }  
  47.  @keyframes wrapper {  
  48.  0% {  
  49.  opacity: 0;  
  50. }  
  51.  7% {  
  52.  opacity: 1;  
  53. }  
  54.  100% {  
  55.  opacity: 1;  
  56. }  
  57. }  
  58. /* Adicionar Animação ao Seletor */  
  59.   
  60. .wrapper {  
  61.     -webkit-animation-name: wrapper;  
  62.     -moz-animation-name: wrapper;  
  63.     -ms-animation-name: wrapper;  
  64.     -o-animation-name: wrapper;  
  65.     animation-name: wrapper;  
  66. }  


Veja o Banner Animado    

Fonte: Matt Mcnamee - Queensland - Austrália
No site dele tem um gerador de Animação em CSS3 e de Grid Responsivo    







Beto Marques

Beto MarquesWebdesigner e Consultor desde 1997. Desenvolveu vários Sites, Cursos, Tutoriais e Ebooks sobre Webdesign.

Como consultor já treinou várias empresas e dentre seus trabalhos , se destaca Treinamento de FrontPage e Flash para o Departamento de Computação Gráfica - TV Globo - Projac.


Voltar ao Topo