CSS: Cambio de colores por intervalos de tiempo

publicado por: Anonymous

Quiero realizar un cambio de color a todo el body de un html, teniendo como principales colores el amarillo,anaranjado y negro simulando un amanecer,atardecer y anochecer,claramente estos colores tienen que tener su tiempo cada uno para simular la transición,pero no logro pasar del primer color (amarillo) hacia el siguiente (anaranjado) y este hacia el negro (simulando el anochecer)

solución

Eso se puede hacer con iteraciones de CSS. Al body le agrego una animación, que en mi caso le puse el nombre anim, que tiene duración de 5 segundos, y se repite indefinidamente.

La animación se ejecuta inmediatamente después de que carga la página web. Con @keyframes determino los intervalos de tiempo, en porcentaje del progreso.

En mi ejemplo, mi plan fue cambiar de amarillo, naranja, negro, y luego volver a cambiar los colores, pero de manera inversa, naranja, y otra vez amarillo, de modo que cuando vuelve a amarillo, empieza la animación otra vez.

Los porcentajes los calculé de manera manual, la animación tiene 5 partes, entonces hago 100/(partes-1), y da que cada un %25 tiene que cambiar de color.

_x000D_

_x000D_

@keyframes anim{_x000D_
    0% {background-color: #ff0;} /*Amarillo*/_x000D_
   25% {background-color: #f80;} /*Naranja*/_x000D_
   50% {background-color: #000;} /*Negro*/_x000D_
   75% {background-color: #f80;} /*Otra vez naranja*/_x000D_
  100% {background-color: #ff0;} /*Otra vez amarillo*/_x000D_
}_x000D_
body {_x000D_
  animation-name: anim;_x000D_
  animation-duration: 5s;_x000D_
  animation-iteration-count: infinite;_x000D_
}

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *