Summary  
This chapter covers using a CSS shorthand property to combine all animation settings (name, duration, timing function, delay, iteration count, direction, fill mode, and play state) into a single declaration.

General domain of usage  
Web interface animations

Podemos utilizar la forma abreviada para especificar todas las propiedades de animación. La sintaxis es la siguiente:
```css
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
```
Reescribamos brevemente las siguientes propiedades.
### Forma extensa
```css
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
```
### Forma abreviada
```css
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
```
Puede parecer confuso y es fácil omitir algún valor. Sin embargo, existe esta posibilidad.

> Nota
>
> Para el navegador, no hay diferencia entre la forma abreviada y la forma extensa de especificar la animación.

Mejore sus habilidades de estilizado dominando técnicas avanzadas de CSS para el diseño web moderno. Posicione y gestione elementos con precisión utilizando estrategias avanzadas de posicionamiento. Cree transiciones suaves y animaciones atractivas para mejorar la experiencia del usuario. Transforme y manipule elementos para lograr efectos visuales dinámicos. Desarrolle diseños responsivos que se adapten a diferentes dispositivos y optimice su flujo de trabajo con preprocesadores CSS como Sass.

Investigue qué pueden esperar los estudiantes de este curso avanzado de estilos en HTML y CSS. ¿Qué conocimientos previos se requieren antes de comenzar el curso? ¿Qué temas se abordarán en el mismo?

Posicionamiento y gestión de elementos en páginas web. Estudio de las diferentes propiedades de posicionamiento, uso del orden de apilamiento para controlar la visibilidad de elementos superpuestos y manejo del desbordamiento de contenido.

Investigue el potencial de las transiciones y aprenda cómo mejorar la experiencia del usuario. Descubra cómo animar propiedades de manera suave y gradual, creando transiciones de estado sin interrupciones.

Aprenda sobre la propiedad animation y cómo puede utilizarse para crear diseños dinámicos y atractivos. Descubra cómo crear animaciones complejas utilizando keyframes y cómo controlar la animación.

Explora la propiedad de transformación, que permite modificar la apariencia y posición de los elementos en una página web. Aprende a escalar, rotar, sesgar y trasladar elementos en dos y tres dimensiones. Combina múltiples transformaciones para crear efectos más complejos.

Los principios y técnicas utilizados en el diseño adaptativo/responsivo buscan que los sitios web y aplicaciones sean accesibles y visualmente atractivos en diferentes dispositivos, tamaños de pantalla y orientaciones.

Aprende sobre los preprocesadores en CSS y cómo pueden ayudar a escribir un código más eficiente y mantenible. Comprende cómo utilizar preprocesadores para simplificar el flujo de trabajo y generar un código CSS más limpio.

Composición de Múltiples Animaciones

Forma extensa

Forma abreviada