ANIMACIONES

¿Qué son las animaciones CSS?

Una animación permite que un elemento cambie gradualmente de un estilo a otro. Puede cambiar tantas propiedades CSS que desee, tantas veces como desee. Para usar animación CSS, primero debe especificar algunos fotogramas clave para la animación. Los fotogramas clave mantienen qué estilos tendrá el elemento en determinados momentos.

La regla @keyframes

Cuando especifica estilos CSS dentro de la @keyframes regla, la animación cambiará gradualmente del estilo actual al estilo nuevo en determinados momentos.
Para que una animación funcione, debe vincular la animación a un elemento.

Codigo de animaciones

Codigo primer ejemplo

#efecto { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 4s; animation-iteration-count: infinite; }

Codigo segundo ejemplo

#efecto2{ width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 4s; animation-direction: alternate-reverse; animation-iteration-count: infinite; }

Codigo comun

@keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} }