Animaciones CSS Nivel 1 PDF

Preview

Summary

Download Animaciones CSS Nivel 1 PDF

Description

Animaciones CSS Nivel 1 Borrador de trabajo del W3C, 11 octubre 2018 Esta versión: https://www.w3.org/TR/2018/WD-css-animations-1-20181011/ Última versión publicada: https://www.w3.org/TR/css-animations-1/ Borrador del editor: https://drafts.csswg.org/css-animations/ Versión anterior: https://www.w3.org/TR/2017/WD-css-animations-1-20171130/ https://www.w3.org/TR/2013/WD-css3-animations-20130219/ https://www.w3.org/TR/2012/WD-css3-animations-20120403/ Banco de pruebas: http://test.csswg.org/suites/css-animations-1_dev/nightly-unstable/ Seguimiento de problemas: Inline In Spec Problemas de GitHub Editores: Dean Jackson ( Apple Inc. ) L. David Baron ( Mozilla ) Tab Atkins Jr. ( Google ) Brian Birtles ( Mozilla ) Ex editores: David Hyatt ( Apple Inc. ) Chris Marrin ( Apple Inc. ) Sylvain Galineau ( Adobe ) Sugerir una edición para esta especificación: Editor de GitHub Lista de problemas: En bugzilla ®

Copyright © 2018 W3C ( MIT , ERCIM , Keio , Beihang ). Se aplican las normas de licencia del W3C de responsabilidad , marca registrada y documento permisivo .

Resumen Este módulo CSS describe una forma para que los autores animen los valores de las propiedades CSS a lo largo del tiempo, utilizando fotogramas clave. El comportamiento de estas animaciones de

fotogramas clave se puede controlar especificando su duración, número de repeticiones y comportamiento repetitivo. CSS es un lenguaje para describir la representación de documentos estructurados (como HTML y XML) en pantalla, en papel, etc.

Estado de este documento Esta sección describe el estado de este documento en el momento de su publicación. Otros documentos pueden reemplazar este documento. Puede encontrar una lista de las publicaciones actuales del W3C y la última revisión de este informe técnico en el índice de informes técnicos del W3C en https://www.w3.org/TR/. La publicación como borrador de trabajo no implica aprobación por parte de los miembros del W3C. Este es un documento borrador y puede ser actualizado, reemplazado u obsoleto por otros documentos en cualquier momento. Es inapropiado citar este documento como algo diferente al trabajo en progreso. Los problemas de GitHub son preferidos para la discusión de esta especificación. Al presentar un problema, coloque el texto "animaciones css" en el título, preferiblemente así: "[animaciones css] ... resumen del comentario ... ". Todos los problemas y comentarios están archivados , y también hay un archivo histórico . Este documento fue producido por el Grupo de Trabajo CSS (parte de la Actividad de Estilo ). Este documento fue producido por un grupo que opera bajo la Política de Patentes del W3C . W3C mantiene una lista pública de cualquier divulgación de patentes realizada en relación con los entregables del grupo; esa página también incluye instrucciones para divulgar una patente. Una persona que tenga conocimiento real de una patente que cree que contiene una o varias Reclamaciones Esenciales debe divulgar la información de acuerdo con la sección 6 de la Política de Patentes del W3C . Este documento se rige por el documento de proceso del W3C del 1 de febrero de 2018 .

Tabla de contenido 1

Introducción

2

Valores

3

Animaciones

44 4.1

Fotogramas clave Funciones de temporización para fotogramas clave

4.2 4.2 4.3 4.3

La propiedad de ‘nombre de animación’ La propiedad de ‘duración de animación’

4.4

La propiedad ‘animation-timing-function’

4.5 4.5 4.6

La propiedad de ‘recuento de iteración de animación’ La propiedad de ‘dirección de animación’

4.7

La propiedad de ‘animación-reproducción-estado’

4.8 4.9

La propiedad de ‘animación-retraso’ La propiedad de ‘modo de relleno de animación’

4.10

La propiedad de ‘animación de’ taquigrafía

55

Eventos de animación

5.1

La AnimationEventinterfaz

5.1.1

Definición IDL

5.1.2

Atributos

5.2

Tipos de AnimationEvent

5.3

Controladores de eventos en elementos, Documentobjetos y Windowobjetos.

66 6.1

Interfaces DOM La CSSRuleinterfaz

6.1.1

6.2

Definición IDL

La CSSKeyframeRuleinterfaz

6.2.1

Definición IDL

6.2.2

Atributos

6.3

La CSSKeyframesRuleinterfaz

6.3.1

Definición IDL

6.3.2

Atributos

6.3.3

El appendRulemetodo

6.3.4

El deleteRulemetodo

6.3.5

El findRulemetodo

6.4 6.4.1

Extensiones a la GlobalEventHandlersinterfaz Definición IDL

77

Consideraciones de privacidad y seguridad

8

Agradecimientos

99

Otros asuntos abiertos

10

Resoluciones del grupo de trabajo que están pendientes de edición Conformidad Convenciones de documentos Clases de conformidad Requisitos para la implementación responsable de CSS

Implementaciones parciales Implementaciones de características inestables y patentadas Implementaciones de características de nivel CR

Índice Términos definidos por esta especificación Términos definidos por referencia Referencias Referencias normativas Referencias informativas Índice de propiedad Índice IDL Índice de problemas

1. Introducción Esta sección no es normativa. Las transiciones CSS [CSS3-TRANSITIONS] proporcionan una forma de interpolar valores de propiedades CSS cuando cambian como resultado de cambios subyacentes en las propiedades. Esto proporciona una manera fácil de hacer animación simple, pero los estados de inicio y finalización de la animación están controlados por los valores de propiedad existentes, y las transiciones proporcionan poco control al autor sobre cómo progresa la animación. Esta propuesta presenta animaciones definidas, en las que el autor puede especificar los cambios en las propiedades CSS a lo largo del tiempo como un conjunto de fotogramas clave. Las animaciones son similares a las transiciones en que cambian el valor de presentación de las propiedades CSS con el tiempo. La principal diferencia es que, si bien las transiciones se disparan implícitamente cuando cambian los valores de las propiedades, las animaciones se ejecutan explícitamente cuando se aplican las propiedades de la animación. Debido a esto, las animaciones requieren valores explícitos para las propiedades que se están animando. Estos valores se especifican utilizando fotogramas clave de animación, que se describen a continuación. Se pueden controlar muchos aspectos de la animación, incluida la cantidad de veces que la animación se repite, si alterna o no entre los valores inicial y final, y si la animación se debe ejecutar o pausar. Una animación también puede retrasar su hora de inicio.

2. Valores

Esta especificación sigue las convenciones de definición de propiedad CSS de [CSS2] . Los tipos de valor no definidos en esta especificación se definen en Valores y Unidades CSS [CSS-VALUES-3] . Otros módulos CSS pueden ampliar las definiciones de estos tipos de valores. Además de los valores específicos de la propiedad enumerados en sus definiciones, todas las propiedades definidas en esta especificación también aceptan las palabras clave de todo el CSS como su valor de propiedad. Para facilitar la lectura, no se han repetido explícitamente.

3. Animaciones Las animaciones CSS afectan los valores de propiedad calculados. Este efecto ocurre al agregar un valor especificado a la cascada CSS ( [CSS3CASCADE] ) (al nivel de las animaciones CSS) que producirá el valor calculado correcto para el estado actual de la animación. Como se define en [CSS3CASCADE] , las animaciones anulan todas las reglas normales, pero son anuladas por reglas importantes. Si en algún momento hay múltiples animaciones que especifican el comportamiento de la misma propiedad, la animación que se produce en último lugar en el valor de ‘nombre-animación’ anulará las otras animaciones en ese punto. Una animación no afecta el valor calculado antes de la aplicación de la animación (es decir, cuando la propiedad de ‘nombre de animación’ se establece en un elemento) o después de que se elimina. Además, normalmente una animación no afecta el valor calculado antes de que el retraso de la animación haya expirado o después del final de la animación, pero puede hacerlo dependiendo de la propiedad del ‘modo de relleno de animación’ . Mientras se ejecuta, la animación calcula el valor de esas propiedades que anima. Otros valores pueden tener prioridad sobre el valor animado de acuerdo con la cascada CSS ( [CSS3CASCADE] ). Mientras se aplica una animación pero no ha terminado, o ha terminado pero tiene un ‘modo’ de ‘relleno de animación’ de ‘reenvío’ o ‘ambos’ , el agente de usuario debe actuar como si la propiedad ‘will-change’ ( [css-will-change-1] ) en Además, el elemento incluye todas las propiedades animadas por la animación. El tiempo de inicio de una animación es el momento en que se resuelven el estilo que aplica la animación y la regla @keyframes correspondiente. Si se especifica una animación para un elemento pero la regla @keyframes correspondiente aún no existe, la animación no puede comenzar; la animación comenzará desde el principio tan pronto como se pueda resolver una regla de @keyframes coincidente. Una animación especificada modificando dinámicamente el estilo del elemento comenzará cuando se resuelva este estilo; eso puede ser inmediatamente en el caso de una regla de pseudo estilo, como hover, o puede ser cuando el motor de secuencias de comandos devuelve el control al navegador (en el caso del estilo aplicado por la secuencia de comandos). Tenga en cuenta que la actualización dinámica de las reglas de estilo de fotogramas clave no inicia ni reinicia una animación.

Una animación se aplica a un elemento si su nombre aparece como uno de los identificadores en el valor calculado de la propiedad de ‘nombre de’ animación y la animación utiliza una regla @keyframes válida. Una vez que se inicia una animación, continúa hasta que finaliza o se elimina el ‘nombre de’ la ‘animación’ . Los cambios en los valores de las propiedades de animación mientras se ejecuta la animación se aplican como si la animación tuviera esos valores desde el principio. Por ejemplo, acortar el ‘retraso de’ la ‘animación’ puede hacer que la animación salte hacia adelante o incluso que termine de inmediato y envíe un animationendevento. Por el contrario, extender el ‘retraso de’ la ‘animación’ puede hacer que una animación se reinicie y envíe un animationstartevento. El mismo nombre de regla @keyframes puede repetirse dentro de un ‘nombre de animación’ . Los cambios en el ‘nombre de’ la ‘animación’ actualizan las animaciones existentes al iterar sobre la nueva lista de animaciones de la última a la primera y, para cada animación, encontrar la última animación coincidente en la lista de animaciones existentes. Si se encuentra una coincidencia, la animación existente se actualiza utilizando las propiedades de animación correspondientes a su posición en la nueva lista de animaciones, mientras se mantiene el tiempo de reproducción actual como se describió anteriormente. La animación coincidente se elimina de la lista existente de animaciones de modo que no coincida dos veces. Si no se encuentra una coincidencia, se crea una nueva animación. Como resultado, actualizar ‘el nombre de la animación’de 'a' a 'a, a' hará que la animación existente para 'a' se convierta en la segunda animación en la lista y se creará una nueva animación para el primer elemento de la lista.

EXAMPLE 1 div { nombre-animación: diagonal-slide; duración de la animación: 5s; animación-iteración-cuenta: 10; } @keyframes diagonal-slide { desde { izquierda: 0; arriba: 0; } a { izquierda: 100 px; superior: 100 px; } }

Esto producirá una animación que mueve un elemento de (0, 0) a (100px, 100px) durante cinco segundos y se repite nueve veces (para un total de diez iteraciones).

Establecer la propiedad de ‘visualización’ en ‘none’ terminará cualquier animación en ejecución aplicada al elemento y sus descendientes. Si un elemento tiene una ‘visualización’ de ‘ninguno’ , la actualización de la ‘visualización’ a un valor diferente a ‘ninguno’ iniciará todas las animaciones aplicadas al elemento por la propiedad de ‘nombre de animación’ , así como todas las animaciones aplicadas a los descendientes con una ‘visualización’ que ‘no’ sea ‘ninguna’ . Si bien los autores pueden usar animaciones para crear contenido que cambie dinámicamente, el contenido que cambia dinámicamente puede provocar incautaciones en algunos usuarios. Para obtener información sobre cómo evitar el contenido que puede provocar convulsiones, consulte la Pauta 2.3: Convulsiones: no diseñe el contenido de una manera que se sepa que causa convulsiones ( [WCAG20] ). Las implementaciones pueden ignorar las animaciones cuando el medio de representación no es interactivo, por ejemplo, cuando se imprime. Una versión futura de esta especificación puede definir cómo representar animaciones para estos medios.

4. Fotogramas clave Los fotogramas clave se utilizan para especificar los valores de las propiedades de animación en varios puntos durante la animación. Los fotogramas clave especifican el comportamiento de un ciclo de la

animación; la animación puede iterar cero o más veces. Los fotogramas clave se especifican mediante la regla ‘@keyframes’ at-rule, definida de la siguiente manera: @keyframes = @keyframes { } = | = # { } = de | a |

La dentro de ‘@keyframes’ solo puede contener reglas . La dentro de acepta cualquier propiedad CSS, excepto los que se definen en la presente memoria, pero lo hace aceptar el ‘-tiempo-función de animación’ propiedad y lo interpreta de forma especial. Ninguna de las propiedades interactúa con la cascada (por lo que usar ‘! Important’ en ellas no es válido y hará que se ignore la propiedad). Un bloque ‘@keyframes’ tiene un nombre dado por o en su preludio. Las dos sintaxis son equivalentes en funcionalidad; el nombre es el valor de la identificación o cadena. Como es normal para sy s, los nombres distinguen entre mayúsculas y minúsculas ; dos nombres son iguales solo si son iguales punto por código. El excluye adicionalmente la palabra clave ‘none’ .

EXAMPLE 2 Por ejemplo, las siguientes dos reglas de ‘@keyframes’ tienen el mismo nombre, por lo que se ignorará la primera: @keyframes foo { ...} @keyframes "foo" { ...}

Por otro lado, el siguiente ‘nombre de la’ regla ‘@keyframes’ es diferente de las dos reglas anteriores: @keyframes FOO {... }

Las siguientes reglas de ‘@keyframes’ no son válidas porque usan valores no permitidos : @keyframes inicial { ...} @keyframes Ninguno { ...}

Sin embargo, esos nombres * pueden * especificarse con una , por lo que los siguientes son válidos : @keyframes "inicial" { ...} @keyframes "Ninguno" { ...}

El para un consiste en una lista separada por comas de valores porcentuales o las palabras clave ‘desde’ o ‘hacia’ . El selector se utiliza para especificar el porcentaje a lo largo de la duración de la animación que representa el fotograma clave. El fotograma clave en sí está especificado por el bloque de valores de propiedad declarados en el selector. La palabra clave ‘from’ es equivalente al valor ‘0%’ . La palabra clave ‘to’ es equivalente al valor ‘100%’ . Los valores inferiores al ‘0%’ o superiores al ‘100%’ no son válidos y hacen que se ignore su . Tenga en cuenta que el especificador de unidad de porcentaje debe usarse en valores de porcentaje. Por lo tanto, ‘0’ es un selector de fotogramas clave no válido. Si no se especifica un ‘0%’ o ‘de un’ fotograma clave, el agente de usuario construye un fotograma clave de ‘0%’ utilizando los valores calculados de las propiedades que se están animando. Si un ‘100%’ o ‘a’ no se especifica fotograma clave, entonces el agente de usuario construye un ‘100%’ fotograma clave usando los valores calculados de las propiedades está animando. La contiene propiedades y valores. Las propiedades definidas por esta especificación se ignoran en estas reglas, con la excepción de ‘animation-timing-function’ , cuyo

comportamiento se describe a continuación. Además, las propiedades calificadas con! Important son inválidas e ignoradas. Si se definen varias reglas ‘@keyframes’ con el mismo nombre, gana la última en orden de documento y se ignoran todas las anteriores.

EXAMPLE 3 div { nombre-animación: diapositiva-derecha; duración de la animación: 2s; } @keyframes diapositiva derecha { desde { margen izquierdo: 0px; } 50% { margen izquierdo: 110 px; opacidad: 1; } 50% { opacidad: 0.9; } a { margen izquierdo: 200 px; } }

En la marca 1s, la animación de la diapositiva derecha tendrá el mismo estado que si hubiéramos definido la regla del 50% de esta manera: @keyframes diapositiva derecha { 50% { margen izquierdo: 110 px; opacidad: 0.9; } a { margen izquierdo: 200 px; } }

Para determinar el conjunto de fotogramas clave, todos los valores en los selectores se ordenan en orden creciente por tiempo. Las reglas dentro de la regla @keyframes luego en cascada; Las propiedades de un fotograma clave pueden derivarse de más de una regla @keyframes con el mismo valor de selector.

Si no se especifica una propiedad para un fotograma clave, o si se especifica pero no es válida, la animación de esa propiedad continúa como si ese fotograma clave no existiera. Conceptualmente, es como si se construyera un conjunto de fotogramas clave para cada propiedad que está presente en cualquiera de los fotogramas clave, y se ejecuta una animación independientemente para cada propiedad.

EXAMPLE 4 @keyframes wobble { 0% { izquierda: 100 px; } 40% { izquierda: 150 px; } 60% { izquierda: 75 px; } 100% { izquierda: 100 px; } }

Se especifican cuatro fotogramas clave para la animación denominada "bamboleo". En el primer fotograma clave, que se muestra al comienzo del ciclo de animación, el valor de la propiedad ‘izquierda que’ se está ‘animando’ es de ‘100 px’ . En un 40% de la duración de la animación, ‘left’ ha animado a ‘150px’ . Al 60% de la duración de la animación, la ‘izquierda’ ha vuelto a ‘animarse’ a ‘75 px’ . Al final del ciclo de animación, el valor de ‘left’ ha vuelto a ‘100px’ . El siguiente diagrama muestra el estado de la animación si se le diera una duración de ‘10 segundos’ .

Figure 1 Estados de animación especificados por fotogramas clave

ISSUE 1 Esta especificación necesita definir cómo se determina el valor a partir de los fotogramas clave, como lo hace la sección de Aplicación de transiciones para Transiciones CSS.

4.1. Funciones de temporización para fotogramas clave Una regla de estilo de fotograma clave también puede declarar la función de sincronización que se utilizará a medida que la animación se mueve al siguiente fotograma clave.

EXAMPLE 5 @keyframes rebote { desde { superior: 100 px; animación-sincronización-función: facilidad de salida; } 25% { arriba: 50px; función de sincronización de animación: facilidad de entrada; } 50% { superior: 100 px; animación-sincronización-función: facilidad de salida; } 75% { arriba: 75 px; función de sincronización de animación: facilidad de entrada; } a { superior: 100 px; } }

Se especifican cinco fotogramas clave para la animación denominada "rebote". Entre el primer y el segundo fotograma clave (es decir, entre 0% y 25%) se utiliza una función de temporización de facilitación. Entre el segundo y el tercer fotograma clave (es decir, entre 25% y 50%) se utiliza una función de sincronización fácil. Y así. El efecto aparecerá como un elemento que se mueve hacia arriba en la página 50 px, disminuyendo la velocidad cuando alcanza su punto...