Transiciones:
Las transiciones en CSS permiten que los cambios en las propiedades de
los elementos ocurran de manera gradual en lugar de instantánea,
proporcionando efectos visuales más suaves y atractivos. Por ejemplo, al
cambiar el color de fondo de un botón al pasar el cursor sobre él, una
transición puede hacer que este cambio sea progresivo en lugar de
inmediato.
Propiedades clave de las transiciones CSS:
transition-property: Especifica la(s) propiedad(es) CSS que serán
animadas durante la transición.
transition-duration: Define la duración de la transición.
transition-timing-function: Determina la curva de aceleración de la
transición, controlando la velocidad en diferentes puntos.
transition-delay: Establece un retraso antes de que comience la
transición.
Ejemplo práctico:
html
Copiar código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Transición CSS</title>
<style>
.boton {
background-color: #008CBA;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border: none;
transition: background-color 0.5s ease; /* Transición de 0.5
segundos */
.boton:hover {
background-color: #005f73; /* Color al pasar el cursor */
</style>
</head>
<body>
<button class="boton">Pasa el cursor sobre mí</button>
</body>
</html>
En este ejemplo, al pasar el cursor sobre el botón, el color de fondo
cambiará de #008CBA a #005f73 de manera gradual en 0.5 segundos,
gracias a la propiedad transition aplicada.
Animaciones
La regla @keyframes en CSS es una herramienta que permite definir
animaciones especificando los estados intermedios de un elemento en
distintos puntos de su ciclo de animación. Con @keyframes, se pueden
establecer estilos en momentos clave (fotogramas) y el navegador se
encarga de generar las transiciones suaves entre estos estados.
@keyframes nombreDeLaAnimacion {
0% { /* Estilos iniciales */
50% {
/* Estilos intermedios */
100% {
/* Estilos finales */
nombreDeLaAnimacion: Nombre asignado a la animación,
utilizado para referenciarla al aplicarla a un elemento.
0%, 50%, 100%: Porcentajes que indican el progreso de la
animación, donde 0% representa el inicio y 100% el final. También
se pueden usar las palabras clave from (equivalente a 0%) y to
(equivalente a 100%).
Aplicación de la animación a un elemento:
Una vez definida la animación con @keyframes, se aplica a un elemento
utilizando la propiedad animation:
.elemento { animation: nombreDeLaAnimacion 2s infinite; }
En este ejemplo:
nombreDeLaAnimacion: Nombre de la animación definida
previamente.
2s: Duración de la animación (2 segundos en este caso).
infinite: La animación se repite indefinidamente.
Transformaciones:
La propiedad transform en CSS permite aplicar transformaciones
visuales a elementos HTML, como rotaciones, escalados, traslaciones y
sesgados, tanto en dos dimensiones (2D) como en tres dimensiones
(3D). Estas transformaciones se realizan sin alterar el flujo del
documento, es decir, sin afectar la posición de otros elementos en la
página.
Funciones comunes de transformación:
translate(x, y): Desplaza un elemento en los ejes X e Y. Por
ejemplo, translate(50px, 100px) moverá el elemento 50 píxeles a
la derecha y 100 píxeles hacia abajo.
rotate(angle): Rota un elemento en el plano 2D según el ángulo
especificado. Por ejemplo, rotate(45deg) girará el elemento 45
grados en el sentido de las agujas del reloj.
scale(x, y): Escala el tamaño de un elemento en los ejes X e Y. Por
ejemplo, scale(2, 1.5) duplicará el ancho y aumentará en un 50%
la altura del elemento.
skew(x-angle, y-angle): Inclina un elemento en los ejes X e Y
según los ángulos especificados. Por ejemplo, skew(30deg, 20deg)
aplicará una inclinación de 30 grados en el eje X y 20 grados en el
eje Y.
Ejemplo práctico:
html
Copiar código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de transformaciones CSS</title>
<style>
.transformado {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg) translate(50px, 100px) scale(1.5);
</style>
</head>
<body>
<div class="transformado"></div>
</body>
</html>
En este ejemplo, el elemento <div> con la clase transformado se rota 45
grados, se desplaza 50 píxeles a la derecha y 100 píxeles hacia abajo, y
se escala al 150% de su tamaño original.
