Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




Dazzle with your smile!

Publish perfectly-optimized content in 1-click



 
 
 

Cómo podemos hacer animaciones con solo CSS?

 
Descarga estos ejemplos

CSS permite animaciones de elementos HTML sin usar JavaScript o Flash. Lindo
Todas estas propiedades @keyframes, animation-name, animation-duration, animation-delay, animation-iteration-count
dirección de animación, función de tiempo de animación, modo de relleno de animación, animación
Son compatibles con todos estos navegadores:
 
Cómo podemos hacer animaciones con solo CSS?
 
Cuando especifica estilos CSS dentro de la regla @keyframes, la animación cambiará gradualmente desde el
estilo actual al nuevo estilo en determinados momentos.
El siguiente ejemplo vincula la animación "example_1" al elemento de etiqueta div.
La animación durará 15 segundos y cambiará gradualmente el color de fondo del elemento de la etiqueta div.
de "azul" a "amarillo":

 

Ejemplo 1 -

 

<html> <head> <style> div{ width: 500px; height: 50px; background-color: blue; animation-name: example_1; animation-iteration-count: infinite; animation-duration: 15s; font-weight:bold; font-size:36px; color:white; } @keyframes example_1 { from {background-color: blue;} to {background-color: yellow;} from {background-color: yellow;} to {background-color: blue;}
} </style> </head> <body> <div><center> DZOSOFT </center></div> </body> </html>



 

Ejemplo - 2 -

 
La propiedad animation-delay especifica un retraso para el inicio de una animación.
El siguiente ejemplo tiene un retraso de 2 segundos antes de iniciar la animación.

<!DOCTYPE html> <html> <head> <style> div{ width: 50px; height: 50px; background-image:url('image/dzosoft.jpg'); background-repeat: no-repeat; position: relative; animation-name: example_2; animation-iteration-count: infinite; animation-duration: 4s; animation-delay: 2s; }
@keyframes example_2 { 0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;} 25% {background-image:url('image/dzosoft.jpg'); left:400px; top:0px;} 0% {background-image:url('image/dzosoft.jpg'); left:400px; top:400px;} 75% {background-image:url('image/dzosoft.jpg'); left:0px; top:400px;} 100% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>


 

Ejemplo - 3 -

 
La propiedad animation-iteration-count especifica el número de veces que debe ejecutarse una animación.
El siguiente ejemplo ejecutará la animación 5 veces antes de que se detenga

<!DOCTYPE html> <html> <head> <style> div{ width: 50px; height: 50px; background-image:url('image/dzosoft.jpg'); background-repeat: no-repeat; position: relative; animation-name: example_3; animation-duration: 4s; animation-iteration-count: 5; }
@keyframes example_3 { 0% {background-image:url('image/dzosoft_1.jpg'); left:0px; top:0px;} 25% {background-image:url('image/dzosoft_2.jpg'); left:200px; top:0px;} 50% {background-image:url('image/dzosoft_3.jpg'); left:200px; top:200px;} 75% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:200px;} 100% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>


 

Ejemplo - 4 -

 
La propiedad animation-direction especifica si una animación debe reproducirse hacia adelante,
hacia atrás o en ciclos alternos.
El siguiente ejemplo ejecutará la animación en dirección inversa (hacia atrás)

<!DOCTYPE html> <html> <head> <style> div{ width: 50px; height: 50px; background-image:url('image/dzosoft.jpg'); background-repeat: no-repeat; position: relative; animation-name: example_4; animation-duration: 4s; animation-direction: reverse; }
@keyframes example_4 { 0% {background-image:url('image/dzosoft_1.jpg'); left:0px; top:0px;} 25% {background-image:url('image/dzosoft_2.jpg'); left:200px; top:0px;} 50% {background-image:url('image/dzosoft_3.jpg'); left:200px; top:200px;} 75% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:200px;} 100% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>



 

Ejemplo - 5 -

 
La propiedad animation-direction especifica si una animación debe reproducirse hacia adelante,
hacia atrás o en ciclos alternos.
El siguiente ejemplo usa el valor "alternativo" para hacer que la animación se ejecute primero hacia adelante y luego hacia atrás.
La propiedad animation-direction puede tener los siguientes valores:
  • normal: la animación se reproduce normalmente (hacia delante). Esto es predeterminado
  • reverse: la animación se reproduce en dirección inversa (hacia atrás)
  • alternativo: la animación se reproduce primero hacia adelante y luego hacia atrás
  • Alternate-reverse: la animación se reproduce primero hacia atrás y luego hacia adelante
  • El siguiente ejemplo ejecutará la animación en dirección inversa (hacia atrás):

    <!DOCTYPE html> <html> <head> <style> div{ width: 50px; height: 50px; background-image:url('image/dzosoft.jpg'); background-repeat: no-repeat; position: relative; animation-name: example_5; animation-duration: 4s; animation-direction: reverse; }
    @keyframes example_5 { 0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;} 25% {background-image:url('image/dzosoft_1.jpg'); left:200px; top:0px;} 50% {background-image:url('image/dzosoft_2.jpg'); left:200px; top:200px;} 75% {background-image:url('image/dzosoft_3.jpg'); left:0px; top:200px;} 100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>



     

    Ejemplo - 6 -

     
    La propiedad animation-direction especifica si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternos.
    El siguiente ejemplo usa el valor "alternativo-reverso" para hacer que la animación se ejecute primero hacia atrás y luego hacia adelante:
     <!--
     <!DOCTYPE html>
    <html>
    <head>
    <style> 
     div{
      width: 50px;
      height: 50px;
      background-image:url('image/dzosoft.jpg'); 
      background-repeat: no-repeat;
      position: relative;
      animation-name: example_6;
      animation-duration: 4s;
      animation-iteration-count: 2;
      animation-direction: alternate-reverse;  
    }
    
    @keyframes example_6 { 0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;} 25% {background-image:url('image/dzosoft_1.jpg'); left:500px; top:0px;} 50% {background-image:url('image/dzosoft_2.jpg'); left:500px; top:100px;} 75% {background-image:url('image/dzosoft_3.jpg'); left:0px; top:100px;} 100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>



     

    Ejemplo - 7 -

     
    La propiedad animation-timing-function especifica la curva de velocidad de la animación.
    Puede tener los siguientes valores:
    • facilidad: especifica una animación con un comienzo lento, luego rápido y luego un final lento (esto es predeterminado)
    • lineal: especifica una animación con la misma velocidad de principio a fin
    • ease-in: especifica una animación con un comienzo lento
    • ease-out: especifica una animación con un final lento
    • ease-in-out: especifica una animación con un comienzo y un final lentos
    • cubic-bezier(n,n,n,n) - Le permite definir sus propios valores en una función cubic-bezier

    • El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar

      <!DOCTYPE html> <html> <head> <style> div{ width: 50px; height: 50px; background-color: white; font-weight: bold; position: relative; animation: move_dzo 5s infinite; }
      .div_1{ background-image:url('image/dzosoft.jpg'); background-repeat: no-repeat; animation-timing-function: linear; } .div_2{ background-image:url('image/dzosoft_1.jpg'); background-repeat: no-repeat; animation-timing-function: ease; } .div_3{ background-image:url('image/dzosoft_2.jpg'); background-repeat: no-repeat; animation-timing-function: ease-in; } .div_4{ background-image:url('image/dzosoft_3.jpg'); background-repeat: no-repeat; animation-timing-function: ease-out; } .div_5{ background-image:url('image/dzosoft_4.jpg'); background-repeat: no-repeat; animation-timing-function: ease-in-out; }
      @keyframes move_dzo { from {left: 0px;} to {left: 500px;} } </style> </head> <body> <div class="div_1"></div> <div class="div_2"></div> <div class="div_3"></div> <div class="div_4"></div> <div class="div_5"></div> </body> </html>




       

      Ejemplo - 8 -

       
      La propiedad animation-fill-mode especifica un estilo para el elemento de destino cuando la animación no se está reproduciendo.
      (antes de que empiece, después de que termine, o ambos).
      El siguiente ejemplo permite que el elemento <div> conserve los valores de estilo del último fotograma clave
      cuando termina la animación:

      <!DOCTYPE html> <html> <head> <style> div{ width: 50px; height: 50px; background-image:url('image/dzosoft_1.jpg'); background-repeat: no-repeat; position: relative; animation-name: example_8; animation-duration: 3s; animation-fill-mode: forwards; }
      @keyframes example_8 { from {top: 0px;} to {top: 400px; background-image:url('image/dzosoft_1.jpg');} } </style> </head> <body> <div></div> </body> </html>



       

      Ejemplo - 9 -

       
      El siguiente ejemplo permite que el elemento
      obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación.
      (durante el período de retraso de la animación):
      Deje que el elemento div obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación
      (durante el período de retraso de la animación)

      <!DOCTYPE html> <html> <head> <style> div{ width: 50px; height: 50px; background-image:url('image/dzosoft_2.jpg'); background-repeat: no-repeat; position: relative; animation-name: example_9; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: backwards; }
      @keyframes example_9 { from {top: 0px; background-image:url('image/dzosoft_2.jpg');} to {top: 200px;} } </style> </head> <body> <div></div> </body> </html>


       

      Ejemplo - 10 -

       
      Este ejemplo utiliza seis de las propiedades de animación.

      <!DOCTYPE html>
      <html>
      <head>
      <style> 
       div{
        width: 50px;
        height: 50px;
        background-image:url('image/dzosoft_3.jpg'); 
        background-repeat: no-repeat;
        position: relative;
        animation-name: example_10;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      
      @keyframes example_10 { 0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;} 25% {background-image:url('image/dzosoft_1.jpg'); left:200px; top:0px;} 50% {background-image:url('image/dzosoft_2.jpg'); left:200px; top:200px;} 75% {background-image:url('image/dzosoft_3.jpg'); left:0px; top:200px;} 100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>



       

      Ejemplo - 11 -

       
      Este ejemplo utiliza la propiedad animación abreviada:

      <!DOCTYPE html> <html> <head> <style> div{ width: 50px; height: 50px; background-image:url('image/dzosoft.jpg'); background-repeat: no-repeat; position: relative; animation: example_11 5s linear 2s infinite alternate; }
      @keyframes example_11 { 0% {background-image:url('image/dzosoft.jpg'); left:0px; top:0px;} 25% {background-image:url('image/dzosoft_1.jpg'); left:300px; top:0px;} 50% {background-image:url('image/dzosoft_2.jpg'); left:300px; top:300px;} 75% {background-image:url('image/dzosoft_3.jpg'); left:0px; top:300px;} 100% {background-image:url('image/dzosoft_4.jpg'); left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>





      También te puede interesar


      Cómo crear un menú horizontal en CSS

      Cómo crear un menú con css y javascript

      Cómo se redondea el radio del borde en CSS?

      Cómo crear un formulario de registro con HTML y CSS

      Cómo hacer un sitio web responsivo

      Cómo crear efecto GLITCH con CSS

      Como cambiar el estilo de las barras de desplazamiento

      Cómo crear un efecto de enfoque al pasar el mouse usando CSS

      Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo


      Leave comment
                

      Guardar apodo y correo electrónico en este navegador para la próxima vez.



      Cargando...     

      Hiding your face is not a solution!