Una vez que se han creado las animaciones en la línea de tiempo, puede ajustarlas de varias formas: reproduciéndolas en bucle, editando los elementos animados o cambiando sus fotogramas clave e intervalos.
En esta página:
Editar elementos animados
Cuando modifica las propiedades de un elemento animado, se añade un fotograma automáticamente a la posición de la marca de reproducción, si no existe uno ya. También puede seleccionar un determinado fotograma clave para editar el elemento que se encuentra en ese punto de la línea de tiempo. Cualquier animación anterior o posterior se ajusta al inicio o al final con las propiedades cambiadas.
Si cambia las propiedades del primer fotograma, se modificarán las propiedades base del elemento en cuestión. Los fotogramas clave que se creen posteriormente heredarán las propiedades base a menos que les asigne otros valores.
Si selecciona varios fotogramas clave y modifica las propiedades de los elementos, los cambios se aplicarán a todos los fotogramas seleccionados.
Si no es necesario que un elemento esté presente en toda la línea de tiempo de la animación, es recomendable que defina su rango de visibilidad para que se oculte cuando esté fuera del rango.
Cambiar el easing de animación
Para cambiar el easing de las animaciones, haga clic con el botón derecho en el intervalo que quiera modificar y seleccione un easing nuevo o bien Opciones de easing. Después, indique un easing personalizado.
Ejecutar animaciones en bucle
- En la línea de tiempo, vaya a la capa de animación que quiera reproducir en bucle y haga clic en el botón Establecer repetición de animación
.
- En el menú emergente, seleccione una de las siguientes opciones:
- Infinita: la animación se reproduce en bucle infinitamente.
- ___ veces: la animación se reproduce en bucle el total de veces que haya especificado.
- Ninguna: la animación no se reproduce en bucle.
Las capas con rangos de visibilidad no se pueden ejecutar en bucle.
Si se ejecuta una capa en bucle, se cambiará la animación en el documento publicado.
Si se reproduce una animación en bucle, solo se verá afectada la vista previa de la escena.
Ajustar los fotogramas clave y los intervalos en la línea de tiempo
Seleccionar fotogramas clave e intervalos
Hay varias formas de seleccionar fotogramas clave e intervalos:
- Haga clic en un fotograma clave o en un intervalo para seleccionarlo. Al seleccionar dos fotogramas clave contiguos, también se selecciona el intervalo que hay entre ellos. Del mismo modo, al seleccionar un intervalo, también se seleccionan los fotogramas clave adyacentes automáticamente.
- Para seleccionar varios fotogramas clave o intervalos de tiempo contiguos, pulse la tecla Mayús y haga clic en ellos.
- Para seleccionar o anular la selección de fotogramas clave o intervalos no contiguos, pulse la tecla Ctrl (Windows) o ⌘ (Mac) y haga clic en ellos.
- Haga clic en un marco de selección rectangular y arrástrelo para seleccionar todos los fotogramas clave que se encuentren dentro del rectángulo. Los intervalos solo se seleccionan si los dos fotogramas clave se incluyen dentro del marco.
- Para activar o anular la selección de los fotogramas clave, pulse la tecla Ctrl (Windows) o ⌘ (Mac), haga clic en un marco y arrástrelo. Se seleccionarán los fotogramas clave que se encuentren dentro del rectángulo y que no estén seleccionados, y se anulará la selección de los que estén seleccionados. De nuevo, esto solo afecta a los intervalos en caso de que sus fotogramas se encuentren dentro del marco.
-
Haga doble clic en una capa de la línea de tiempo para seleccionar todos los fotogramas clave, intervalos y controladores de rangos de visibilidad de esa capa.
Mover fotogramas clave e intervalos
Cuando haya seleccionado los fotogramas clave o los intervalos, puede arrastrarlos por la línea de tiempo para moverlos a otra ubicación. El tiempo de la animación se ajusta a los cambios.
Ajustar animaciones
Puede ajustar animaciones para alargarlas o acortarlas, a la vez que mantiene la proporción de espacio entre los fotogramas clave. Para ajustar una animación, siga estos pasos:
- Seleccione los fotogramas clave o los intervalos que desee ajustar. Pueden estar en capas distintas.
- Mantenga pulsada la tecla Mayús mientras arrastra uno de los fotogramas clave seleccionados hacia la izquierda o la derecha. La duración de la animación se alarga o se reduce dependiendo de si se está arrastrando hacia los extremos o hacia el punto medio de la animación. Los demás fotogramas clave seleccionados se moverán a una distancia proporcional, excepto el que esté al final, que mantendrá su posición.
- Si ha habilitado el acoplamiento de la línea de tiempo, este ajuste solo se aplicará al fotograma clave que arrastre.
- Los fotogramas clave no se pueden superponer ni estar a menos de 0,1 ms de otro fotograma clave.
- Los fotogramas clave no seleccionados no se mueven, pero pueden restringir el movimiento de los fotogramas clave seleccionados.
Escalado de fotogramas clave de la línea de tiempo
Copiar y pegar fotogramas clave
Puede copiar y pegar un fotograma clave en otro punto de la misma capa, en otra capa o incluso en la línea de tiempo de otra página u otro documento. El fotograma clave que se pegue conservará sus propiedades animadas, pero no el easing de animación ni ninguna ruta de movimiento.
Para copiar y pegar fotogramas clave, siga uno de estos métodos:
-
Seleccione el fotograma clave que quiera copiar y pulse Control + C (Windows) o ⌘ + C (Mac). A continuación, haga clic en la posición que quiera usar en la línea de tiempo y seleccione las capas de destino. Para pegar los elementos, pulse Control + V (Windows) o ⌘ + V (Mac).
-
Haga clic derecho en el fotograma clave que quiera copiar. Seleccione Copiar fotograma clave en el menú emergente, haga clic con el botón derecho en la nueva posición de la línea de tiempo de la capa de destino y seleccione Pegar fotograma clave en el menú emergente.
-
Pulse Alt (Windows) o bien Opción (Mac) mientras hace clic en el fotograma clave y lo arrastra. También puede pulsar Alt y arrastrar el fotograma clave (Linux) para duplicarlo en la posición final. Este método no funciona en páginas, documentos ni líneas de tiempo con animaciones anidadas.
Si copia un fotograma y lo pega en una capa que no tenía fotogramas anteriormente, se insertará un fotograma nuevo automáticamente en el segundo 0 junto con el fotograma pegado, a menos que pegue el fotograma en el segundo 0.
Si copia un fotograma y lo pega en otro existente, las propiedades animadas del fotograma pegado sobrescribirán las propiedades animadas del fotograma existente.
Eliminar fotogramas clave
Para eliminar un fotograma clave, haga clic derecho en él (Windows) o pulse Control y haga clic en él (Mac). A continuación, en el menú emergente, seleccione Eliminar.
Modificar las reglas de fotogramas clave en el panel CSS
Si conoce las reglas de fotogramas clave CSS (que empiezan por la palabra clave @keyframes), puede utilizar el panel CSS para ver y editar estilos de animación en la vista de diseño. Los cambios que haga en el panel se mostrarán automáticamente en la línea de tiempo y la escena.
Qué se puede hacer con reglas de fotogramas clave
- Seleccionar un solo elemento animado para ver la regla de fotogramas clave de ese elemento en el panel CSS.
- Añadir fotogramas clave entre otros haciendo clic en Insertar fotograma clave.
- Modificar los porcentajes de los fotogramas clave.
- Añadir, modificar y eliminar propiedades animadas de fotogramas clave.
- Activar o desactivar una propiedad animada en toda la animación haciendo clic en la casilla situada junto al nombre de la propiedad.
- Eliminar un fotograma clave, borrar el porcentaje o eliminar todas las propiedades animadas del fotograma.
- Eliminar todas las animaciones CSS de un elemento seleccionando la regla de fotogramas clave en cuestión y haciendo clic en el botón Eliminar reglas seleccionadas
, situado en la parte inferior del panel.
Modificar las reglas de fotogramas clave en el panel CSS
Limitaciones
- No se puede modificar el easing.
- No se puede añadir un fotograma clave después del último fotograma; para ello hay que usar la línea de tiempo.