Animation
Profesor: Javier López
Volver
Propuesta de la actividad
Creación de la animación
Resultado final

Creación de la animación
La animación se producirá automáticamente cuando el usuario acceda a la página (con un retardo de 1.5 segundos).

Consistirá en el cambio de transparencia (de 0 a 100%) de un <div> con un degradado que contiene una frase ("Participación en más de 300 producciones") y que por lo tanto tapará el <div> que hay debajo (que es un <div> con varias imágenes) y que posteriormente volverá a desaparecer suavemente.

Por lo tanto (tenemos de las actividades anteriores) dos <divs>:


Por lo tanto únicamente nos falta añadir el código de la animación, añadiendo código CSS a los selectores que creamos en la actividad anterior.

estilos.css

#tapa_animacion{
  position:absolute;
  left:0px;
  top:10px;
  width:655px;
  height:334px;  
  font-family:titulares;
  text-align:center;
  font-size:33px;
  color:#313B44;
  line-height:334px;
  opacity:0;
  background-color:rgba(255,255,255,0.85);

  animation:animacion_tapa 5s;
  animation-delay: 1.5s;
  @keyframes animacion_tapa{
    0%{
      opacity:0;
    }   
    20% {
      opacity:1;
    }
    80% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }

  -webkit-animation:animacion_tapa 5s;
  -webkit-animation-delay: 1.5s;
  @-webkit-keyframes animacion_tapa{
    0%{
      opacity:0;
    }   
    20% {
      opacity:1;
    }
    80% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }

  -moz-animation:animacion_tapa 5s;
  -moz-animation-delay: 1.5s;
  @-moz-keyframes animacion_tapa{
    0%{
      opacity:0;
    }   
    20% {
      opacity:1;
    }
    80% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }

  -o-animation:animacion_tapa 5s;
  -o-animation-delay: 1.5s;
  @-o-keyframes animacion_tapa{
    0%{
      opacity:0;
    }   
    20% {
      opacity:1;
    }
    80% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }

  -ms-animation:animacion_tapa 5s;
  -ms-animation-delay: 1.5s;
  @-ms-keyframes animacion_tapa{
    0%{
      opacity:0;
    }   
    20% {
      opacity:1;
    }
    80% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }

  
  <!--degradados-->
  background:radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, white 50%);
  background:-webkit-radial-gradient(center center,
  circle farthest-side, #F9F1CF 0%, silver 20%,
  gray 40%, #F9F1CF 50%);
  background:-moz-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, white 50%);
  background:-o-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, white 50%);
  background:-ms-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, white 50%);
}
El código CSS de la animación se añade en el selector #tapa_animacion:

El código CSS coloreado en gris es el que ya tenemos creado de las actividades anteriores y salvo una excepción no vamos a modificarlo.

La única modificación de este código es opacity: 0.85 que pasa a ser opacity: 0 para que inicialmente el <div> no se vea (pero ocupe ese espacio).
Con animation definimos cómo se va a llamar la animación que realizará y cuántos segundos durará en total.
animation-delay indica cuántos segundos tiene que esperar para empezar a realizar la animación (en este caso 1 segundo y medio).

A través de @keyframes + nombre de la animación explicamos qué es lo que tiene que hacer exactamente la animación.
Utilizamos los porcentajes para indicar qué propiedades tienen que modificarse en cada momento.

En este caso, la animación empieza (0%) con una opacidad de 0 (no se visualiza) y llega hasta el 100% de opacidad en el 20% de la duración total (fijada anteriormente con animation), osea en un tiempo de 0.3 segundos (20% de 1.5 segs), siguiendo el mismo proceso con el resto de porcentajes.

Repetimos exactamente el mismo código utilizando los diferentes prefijos para asegurar al máximo la compatibilidad con el resto de navegadores modernos: