Ediciones ENI Editorial | líder en informática
Los módulos de animación
Los módulos CSS
Con la llegada de CSS3, W3C ha introducido módulos dedicados a la animación de elementos en las páginas web. Antes de esto, las páginas web contenían habitualmente animaciones creadas con tecnologías casi siempre propietarias, como Adobe Animate (antiguamente llamado Flash) y que hacían necesario el uso de plugins.
Con estos módulos, podrá crear animaciones sencillas y eficaces, que serán reconocidas por todos los navegadores modernos. El W3C nos propone tres módulos:
-
Transforms Module Level 1, que está como Candidate Recommendation a fecha 14 de febrero de 2019: https://www.w3.org/TR/css-transforms-1/Animación:TransformsModuleLevel1
-
CSS Transition, que está como Working Draft a fecha 11 de octubre de 2018: https://www.w3.org/TR/css-transitions-1/
-
Web Animation, que también está como Working Draft a fecha 11 de octubre de 2018: https://www.w3.org/TR/web-animations-1/
En este capítulo no vamos a estudiar todas las funcionalidades de estos módulos, pero sí vamos a abordar los aspectos funcionales básicos para que pueda entender el código que puede encontrar.
Las transformaciones
1. La función y el punto de referencia
Para crear una transformación, use la propiedad transform. Esta propiedad utiliza funciones para aplicar una u otra transformación.
Por defecto, todas las transformaciones tienen como punto de referencia el centro del elemento. Este punto de referencia se utiliza para los cálculos de las transformaciones.
Utilice la propiedad transform-origin si desea cambiar de referencia. El valor especificado indica el nuevo punto de referencia.
Los valores aceptados son:
-
porcentajes. El valor por defecto es 50% 50%, es decir, en la mitad del elemento;
-
palabras clave: left, center, right, top, center y bottom;
-
valores expresados en píxeles.
A continuación se muestra un primer ejemplo muy sencillo de una rotación, con el punto de referencia por defecto, que está en el centro del elemento.
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>La rotación</title>
<meta charset="UTF-8" />
<style>
#init {
position: absolute;
left: 50px;
top: 40px;
width: 100px;
height: 100px;
background-color: lightyellow;
border: 1px solid #000;
}
#transformacion {
position: absolute;
left: 50px;
top: 40px;
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid #000;
}
.rotacion-c {
transform: rotate(25deg);
}
.rotacion-hg {
transform-origin: left top;
...Las transiciones
1. Crear transiciones
Para una propiedad CSS especificada, las transiciones le van a permitir pasar de un valor a otro, con una transición dada. Esta transición se desencadena si se detecta un evento a nivel del elemento implicado. Cuando la transición termina, el elemento retoma sus argumentos CSS iniciales. Las transiciones van a permitir crear auténticas animaciones en CSS.
Para crear una transición, en primer lugar es necesario utilizar un evento sobre un elemento HTML especificado. Por ejemplo, puede utilizar una pseudo-clase como :hover, :active o :focus.
A continuación debe indicar cuáles son las propiedades que desea utilizar con la propiedad transition-property. Después, indique la duración de esta transición con la propiedad transition-duration. La propiedad transition-timing-function va a permitir especificar la curva cinética para la transición: una aceleración o una desaceleración. Para terminar, la propiedad transition-delay especifica si hay un retraso en la aplicación de la transición. Para utilizar todas estas propiedades, la sintaxis abreviada es transition.
La mayor parte de las propiedades CSS de los paneles se pueden utilizar en las transiciones.
2. Crear un desplazamiento horizontal
Para este primer ejemplo, vamos a desencadenar un desplazamiento a la derecha de una imagen. Este desplazamiento se desencadenará pasando el ratón sobre ella.
En primer lugar, veamos el código HTML utilizado:
<div id="desplazamiento"><img src="hipopotamo.jpg"></div> Tenemos un panel <div>...
Las animaciones
1. Crear animaciones
Como toda animación, las animaciones CSS se desarrollan a lo largo del tiempo. El tiempo se gestiona con « imágenes clave », keyframes en inglés. Una imagen clave es una etapa en una animación donde el elemento animado sufre un cambio. Este cambio se aplica a una propiedad CSS. Es la regla @keyframes la que gestiona las etapas de su animación. Cada animación debe tener una regla @keyframes identificada con un nombre. Una de las diferencias que hay con las transiciones es que las animaciones no necesitan un evento para que se desencadenen.
Debe determinar las diferentes etapas de su animación a lo largo del tiempo e indicar los cambios que hay que añadir a las diferentes propiedades CSS. Cada etapa en el tiempo se podrá identificar con un valor en forma de porcentaje.
El valor 0% representa el inicio y 100% indica la duración total de la animación.
Para crear animaciones, vamos a utilizar varias propiedades.
Podrá indicar la cantidad de tiempo que debe durar la animación con la propiedad animation-duration.
La cinética de la animación se gestiona con la siguiente propiedad: animation-timing-function. Puede aplicar aceleraciones y desaceleraciones, de manera similar a lo que hemos visto anteriormente con las transiciones.
A continuación, puede indicar si la animación se debe repetir. Es la noción de iteración. La propiedad animation-iteration-count es la que permite especificar esto.
La propiedad animation-delay indica si la animación debe empezar inmediatamente o con un determinado retraso.
La propiedad animation-direction permite indicar si la animación se debe aplicar en el sentido en el que está definida o en sentido inverso.
La propiedad animation-play-state especifica el estado de la animación. ¿Se reproduce o se interrumpe?
Puede utilizar la sintaxis corta animation indicando en orden: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count y animation-direction.
2. Crear un desplazamiento infinito
Para este primer ejemplo, vamos a crear un desplazamiento infinito de un panel <div>. Por infinito nos referimos a que el panel...
