CSS | Propiedad de la función de tiempo de animación

La propiedad animation-timing-function en CSS se utiliza para especificar cómo la animación realiza transiciones a través de fotogramas clave. Es decir, se usa para especificar el movimiento de la animación durante las transiciones.
Sintaxis: 
 

animation-timing-function: linear | ease | ease-in | ease-out | 
ease-in-out | step-start | step-end|steps(int, start | end) | 
cubic-bezier(n, n, n, n) | initial | inherit;

El valor de la propiedad: 
 

  • facilidad: con este valor de propiedad, la animación comienza lentamente, luego rápido y finalmente termina lentamente (esto es predeterminado).
  • lineal: si se especifica este valor para la propiedad, la animación se reproduce con la misma velocidad de principio a fin.
  • Facilidad de entrada: si se especifica este valor, la animación comienza con un inicio lento.
  • salida gradual: si se especifica este valor para la propiedad, la animación se reproduce normalmente pero finaliza lentamente. Esto es similar a la facilidad de entrada.
  • Facilidad de entrada y salida: con este valor de propiedad, la animación comienza y termina lentamente.

Ejemplo: programa HTML para ilustrar los valores de propiedad anteriores para la propiedad animation-timing-function. 
 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
             CSS | animation-timing-function Property
        </title>
        <style>
            .geeks {
                font-size: 40px;
                text-align:center;
                font-weight:bold;
                color:#090;
                padding-bottom: 5px;
                font-family:Times New Roman;
            }
             
            .geeks1 {
                font-size:17px;
                font-weight:bold;
                text-align:center;
                font-family:Times New Roman;
            }
             
            h2 {
                width: 350px;
                animation-name: text;
                animation-duration: 4s;
                animation-iteration-count: infinite;
                background-color: rgb(255, 210, 85);
            }
             
            #one {
                animation-timing-function: ease;
            }
             
            #two {
                animation-timing-function: linear;
            }
             
            #three {
                animation-timing-function: ease-in;
            }
             
            #four {
                animation-timing-function: ease-out;
            }
             
            #five {
                animation-timing-function: ease-in-out;
            }
             
            @keyframes text {
                from {
                    margin-left: 60%;
                }
                to {
                    margin-left: 0%;
                }
            }
        </style>
    </head>
    <body>
        <div class = "geeks">
            GeeksforGeeks
        </div>
         
        <div class = "geeks1">
            A computer science portal for geeks
        </div>
         
        <!-- For this the animation-timing-function will
             be set to ease -->
        <h2 id="one">
            This text is ease.
        </h2>
         
        <!-- For this animation-timing-function will
             be set to linear -->
        <h2 id="two">
            This text is linear.
        </h2>
         
        <!-- For this animation-timing-function will
             be set to ease-in -->
        <h2 id="three">
            This text is ease-in.
        </h2>
         
        <!-- For this animation-timing-function will
             be set to ease-out -->
        <h2 id="four">
            This text is ease-out.
        </h2>
         
        <!-- For this animation-timing-function will
             be set to ease-in-out -->
        <h2 id="five">
            This text is ease-in-out.
        </h2>
    </body>
</html>                                      

Navegador compatible: los navegadores compatibles con la propiedad animation-timing-function se enumeran a continuación: 
 

  • Google Chrome 43.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Ópera 30.0
  • Safari 9.0

Publicación traducida automáticamente

Artículo escrito por vt_m y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *