Articles
Introducción a CSS
Propiedades CSS relacionadas con animaciones

Propiedades CSS relacionadas con animaciones

Este artículo explica las propiedades CSS relacionadas con animaciones.

Puedes aprender sobre el uso y la sintaxis de las propiedades @keyframes, animation y transition.

YouTube Video

HTML para vista previa

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animación y Transición

Regla @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes se utiliza en animaciones CSS para especificar cómo cambian los estilos durante la animación. En @keyframes, los cambios de estilo desde el inicio hasta el final de la animación se especifican mediante porcentajes de tiempo o palabras clave (from y to).

  • Este es un ejemplo de una animación donde un elemento se desliza de izquierda a derecha y regresa a su posición original.
  • En este ejemplo, slide se escribe después de @keyframes, definiendo una animación llamada slide.
  • 0% es el inicio de la animación, con translateX(0) posicionando el elemento en su ubicación original.
  • 50% es el punto intermedio de la animación, donde el elemento se mueve 200px hacia la derecha usando translateX(200px).
  • 100% es el final de la animación, con el elemento regresando a su posición original.
  • En la clase box-animation-slide, la propiedad animation se utiliza para aplicar la animación slide a intervalos de 3 segundos.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Puedes controlar detalladamente los estilos durante una animación. Al especificar porcentajes, puedes aplicar diferentes estilos en momentos arbitrarios.
    • En este ejemplo, el color cambia gradualmente de rojo a azul, a verde, a amarillo y de regreso a rojo.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • En este ejemplo, from es equivalente a 0% y to es equivalente a 100%. Esto te permite definir animaciones simples.

Sintaxis Básica 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: El nombre de la animación. Esto se especifica usando la propiedad animation o la propiedad animation-name.
  • Porcentajes o Palabras Clave: Usa porcentajes desde 0% hasta 100%, o las palabras clave from (equivalente a 0%) y to (equivalente a 100%).

Propiedad animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

La propiedad animation se utiliza para aplicar animaciones a un elemento. Las animaciones definen cómo cambia un conjunto de estilos CSS a lo largo del tiempo. Con la propiedad animation, puedes controlar el tiempo, el comportamiento, el retraso, el número de repeticiones y más de una animación.

  • La clase box-animation-ease-in-out especifica slide como el animation-name y utiliza la animación slide definida en @keyframes.
    • 3s es la animation-duration, lo que significa que cada ciclo de animación se completa en 3 segundos.
    • ease-in-out es la animation-timing-function, que hace que la animación comience lentamente, acelere y luego disminuya de nuevo al final.
    • infinite es la animation-iteration-count, lo que significa que la animación se repetirá indefinidamente.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • La clase box-animation-alternate especifica color-change como el animation-name y utiliza la animación color-change definida en @keyframes.
    • El 1s después de ease-in-out es el animation-delay, que especifica el retraso antes de que comience la animación. La animación comenzará 1 segundo después.
    • El 3 después de 1s es la animation-iteration-count, lo que significa que la animación se repite 3 veces.
    • alternate es la animation-direction, que especifica la dirección de la reproducción de la animación. alternate especifica que la animación se reproduce de forma alternada.

Composición de la propiedad animation

La propiedad animation es una propiedad abreviada que combina varias subpropiedades en una sola. Aquí están las principales subpropiedades:.

  • Propiedad animation-name: Especifica el nombre de la animación a aplicar. Debe coincidir con el nombre de la animación definida en @keyframes.
  • Propiedad animation-duration: Especifica el tiempo que tarda la animación en completar un ciclo. Las unidades de tiempo son segundos (s) o milisegundos (ms).
  • Propiedad animation-timing-function: Especifica la curva de velocidad de la animación. Se utilizan valores como ease, linear, ease-in, ease-out, ease-in-out, etc.
    • Especificar ease hace que la animación comience lentamente, acelere y luego disminuya al final.
    • Especificar linear hace que la animación progrese a una velocidad constante desde el principio hasta el final.
    • Especificar ease-in hace que la animación comience lentamente y termine rápidamente.
    • Especificar ease-out hace que la animación comience rápidamente y termine lentamente.
    • Especificar ease-in-out hace que comience lentamente, progrese rápidamente y termine lentamente.
  • La propiedad animation-delay especifica el retraso antes de que comience la animación. La unidad de tiempo es segundos o milisegundos.
  • La propiedad animation-iteration-count especifica la cantidad de veces que la animación debe repetirse. Especificar infinite hará que la animación se repita indefinidamente.
  • La propiedad animation-direction especifica la dirección en la que se reproduce la animación. Las opciones incluyen normal (dirección hacia adelante), reverse (dirección hacia atrás), alternate (reproducción alterna) y alternate-reverse (reproducción alterna comenzando hacia atrás).
  • La propiedad animation-fill-mode especifica el estado de la animación antes de que comience y después de que termine. Puedes especificar cualquiera de estas opciones: none, forwards, backwards o both.
  • La propiedad animation-play-state especifica si la animación está en ejecución o en pausa. Puedes especificar running o paused.

Resumen

La propiedad animation es una herramienta poderosa para cambiar dinámicamente el estilo de los elementos. Usando @keyframes, puedes definir cómo cambian los estilos a lo largo del tiempo y controlar el comportamiento detallado de la animación con cada subpropiedad de animation.

Propiedad transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

La propiedad transition se usa para aplicar efectos de animación a los cambios de estilo de CSS. Permite que los cambios se vean suaves durante cambios de estado como hover, focus, active o cuando los estilos son cambiados dinámicamente mediante JavaScript.

Veamos un ejemplo de la clase transition-box donde el color de fondo cambia suavemente al pasar el ratón sobre un botón. - En la clase transition-box, la propiedad transition aplica una transición de 2 segundos al cambio de color de fondo. El cambio se especifica como ease, lo que lo hace suave. - La pseudoclase hover cambia el color de fondo de lightgray a steelblue cuando el ratón pasa sobre el botón. Este cambio ocurre suavemente en los 2 segundos especificados en la clase transition-box.

Es posible aplicar transition a múltiples propiedades simultáneamente. - En el ejemplo de la clase transition-2-properties, el color de fondo cambia en 5 segundos y el ancho cambia en 0.5 segundos.

Sintaxis Básica 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • La propiedad property especifica a qué propiedades de CSS se debe aplicar la animación. Especificar all aplica la animación a todas las propiedades.
  • La propiedad duration especifica el tiempo que tarda en completarse la animación. Especifícalo usando segundos (s) o milisegundos (ms).
  • La propiedad timing-function especifica el cambio en la velocidad de la animación. Puedes usar opciones como ease, linear, ease-in, ease-out, ease-in-out, etc.
  • El delay especifica el tiempo de retraso antes de que comience la animación. Especifícalo en segundos o milisegundos.

Propiedades detalladas de transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

La transition también se puede usar como propiedades individuales de la siguiente manera.

  • transition-property: Especifica la propiedad en la que se aplica la animación.
  • transition-duration: Especifica la duración hasta que se completa la animación.
  • transition-timing-function: Especifica la velocidad de progresión de la animación. Se pueden usar opciones como ease, linear, ease-in, ease-out, ease-in-out.
  • transition-delay: Especifica el tiempo de retraso antes de que comience la animación.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS Relacionadas con los Efectos de Filtro