mozilla
Los resultados de tu búsqueda

    @keyframes

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Resumen

    La regla arroba @keyframes permite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que debe ser alcanzado por determinados puntos durante la animación. Esto le da un control más específico sobre los pasos intermedios de la secuencia de animación que se obtiene al dejar que el navegador maneje todo automáticamente.

    Para utilizar keyframes, se crea una regla de @keyframes con un nombre que es utilizada por la propiedad animation-name para que coincida con una animación de keyframe a su lista. Cada regla @keyframes contiene una lista de estilo de selectores de keyframe, cada una de los cuales está compuesto de un porcentaje a lo largo de la animación en la que se produce el keyframe así como un bloque que contiene la información de estilo para ese keyframe.
     
    Puede listar los keyframes en cualquier orden, éstos serán tratados en el orden en que los porcentajes especificados indican que debe ocurrir.

    Listas válidas de keyframe

    Para obtener una lista de keyframe que sea válida, debe incluir reglas para al menos los tiempos  0% (o desde) y 100% (o hacia) (o sea, los estados inicial y final de la animación). Si ambos desplazamientos de tiempo no se especifican, la declaración keyframe es inválida y no se puede utilizar para la animación.
     
    Si se incluyen las propiedades que no se pueden animar en sus reglas de keyframe, serán ignoradas, pero las propiedades admitidas todavía estarán animadas.

    Duplicar resolución

    Si existen varios conjuntos de keyframe para un nombre dado, el último encontrado se utiliza. Las reglas de @keyframes no estan en cascada, por lo que nunca las animaciones se conducen en keyframe desde un conjunto de reglas más de uno.
     
    Si una animación en tiempo compensado dado se duplica, el último keyframe en la regla de @keyframes para que ese porcentaje se utilice para ese frame. No hay una cascada dentro de una regla de @keyframes
    si varios kayframes especifican los valores de los mismos porcentajes.

    Cuando las propiedades son dejadas fuera de algunos keyframes

    Cualquier propiedad que no se especifican en cualquier keyframes son interpoladas (con la excepción de aquellas que no pueden ser interpoladas, las que son eliminadas de la animación completamente). Por ejemplo:
    @keyframes identifier {
      0% { top: 0; left: 0; }
      30% { top: 50px; }
      68%, 72% { left: 50px; }
      100% { top: 100px; left: 100%; }
    }
    
    En este caso, la propiedad top anima con los keyframes de 0%, 30% y 100%, y left anima utilizando los keyframes 0%, 68%, y 100%.
     
    Sólo las propiedades que se especifican tanto en el 0% y 100% de keyframe serán animadas; cualquier propiedad no incluido en ambos de los keyframes conservarán su valor de partida para la duración de la secuencia de animación.

    Cuando se define un keyframe varias veces

    La especificación define que si un keyframe se define varias veces, pero no todas las propiedades afectadas se especifican en cada keyframe, sólo los valores especificados en el último keyframe se consideran. Por ejemplo:
    @keyframes identifier {
      0% { top: 0; }
      50% { top: 30px; left: 20px; }
      50% { top: 10px; }
      100% { top: 0; }
    }
    
    En este ejemplo, en el 50% del keyframe, el valor utilizado es top: 10px y todos los demás valores en este keyframe se ignoran.
     
    los keyframes (fotogramas clave) en cascada son compatibles a partir de Firefox 14. Para el ejemplo anterior, esto significa que en el fotograma clave 50%, el valor left: 20px será considerado. Esto no está definido en la especificación todavía, pero se está discutiendo.

    Sintaxis

    @keyframes <identifier> {
      [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
    }
    

    Valores

    <identifier>
    Un nombre que identifica la lista de keyframe. Debe coincidir con el identificador de la producción en la sintaxis del CSS.
    from
    Un desplazamiento inicial de 0%.
    to
    Un desplazamiento final de 100%.
    <percentage>
    Un porcentaje de las veces aunque la secuencia de la animación en la que el keyframe especifica debe ocurrir.

    Ejemplos

    Mira los ejemplos del CSS animations.

    Especificaciones

    Compatibilidad del navegador

    Especificaciones Estadp Comentario
    CSS Animations
    The definition of '@keyframes' in that specification.
    Working Draft  

    Características Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Soporte básico (Yes)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    10 12 -o
    12.10 #
    4.0-webkit
    Características Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Soporte básico (Yes)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    ? ?

    ?iones

    Vease también

    Etiquetas y colaboradores del documento

    Contributors to this page: Sheppy, teoli, jesanchez, Velociraktor
    Última actualización por: Sheppy,