Animaciones y Transiciones
## Objetivos de Aprendizaje
- Crear transiciones CSS
- Construir animaciones keyframe
- Controlar tiempo y easing de animaciones
- Animar propiedades comunes
## Transiciones
### Transición Básica
```css
.button {
background-color: #007bff;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
```
### Múltiples Propiedades
```css
.box {
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
```
### Abreviación de Transición
```css
.box {
transition: all 0.3s ease;
transition: transform 0.3s ease-in-out;
transition: opacity 0.2s linear, transform 0.3s ease-out;
}
```
## Propiedades de Transición
### transition-property
```css
.box {
transition-property: transform, opacity, background-color;
}
```
### transition-duration
```css
.box {
transition-duration: 0.3s;
transition-duration: 300ms;
transition-duration: 0.5s, 0.3s;
}
```
### transition-timing-function
```css
.box {
transition-timing-function: ease; /* Inicio/final lento (por defecto) */
transition-timing-function: linear; /* Velocidad constante */
transition-timing-function: ease-in; /* Inicio lento */
transition-timing-function: ease-out; /* Final lento */
transition-timing-function: ease-in-out; /* Inicio y final lentos */
transition-timing-function: steps(4); /* Animación por pasos */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Personalizado */
}
```
### transition-delay
```css
.box {
transition-delay: 0s; /* Sin retraso (por defecto) */
transition-delay: 0.5s; /* 0.5 segundos de retraso */
}
```
## Animaciones Keyframe
### Animación Básica
```css
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 1s ease forwards;
}
```
### Múltiples Pasos
```css
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
opacity: 1;
}
}
```
### Sintaxis de Porcentaje
```css
@keyframes complexAnimation {
0% {
transform: translate(0, 0);
background-color: red;
}
25% {
transform: translate(100px, 0);
background-color: blue;
}
50% {
transform: translate(100px, 100px);
background-color: green;
}
75% {
transform: translate(0, 100px);
background-color: yellow;
}
100% {
transform: translate(0, 0);
background-color: red;
}
}
```
## Propiedades de Animación
### animation-name
```css
.box {
animation-name: slideIn;
}
```
### animation-duration
```css
.box {
animation-duration: 1s;
}
```
### animation-timing-function
```css
.box {
animation-timing-function: ease-in-out;
}
```
### animation-delay
```css
.box {
animation-delay: 0.5s;
}
```
### animation-iteration-count
```css
.box {
animation-iteration-count: 1; /* Ejecutar una vez */
animation-iteration-count: 3; /* Ejecutar 3 veces */
animation-iteration-count: infinite; /* Ejecutar siempre */
}
```
### animation-direction
```css
.box {
animation-direction: normal; /* Hacia adelante (por defecto) */
animation-direction: reverse; /* Hacia atrás */
animation-direction: alternate; /* Hacia adelante y atrás */
animation-direction: alternate-reverse; /* Atrás y adelante */
}
```
### animation-fill-mode
```css
.box {
animation-fill-mode: none; /* Sin relleno (por defecto) */
animation-fill-mode: forwards; /* Mantener estado final */
animation-fill-mode: backwards; /* Aplicar primer fotograma antes de iniciar */
animation-fill-mode: both; /* Ambos forwards y backwards */
}
```
### animation-play-state
```css
.box {
animation-play-state: running; /* Reproduciendo (por defecto) */
animation-play-state: paused; /* Pausado */
}
.box:hover {
animation-play-state: paused;
}
```
### Abreviación de Animación
```css
.box {
animation: slideIn 1s ease-in-out 0.5s 3 alternate forwards;
/* nombre duración timing-function delay iteration-count direction fill-mode */
}
```
## Animaciones Comunes
### Fade In
```css
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
```
### Deslizar Arriba
```css
@keyframes slideUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
```
### Escalar Arriba
```css
@keyframes scaleUp {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
```
### Rotar
```css
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```
### Pulso
```css
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
```
### Shake
```css
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
```
### Rebote
```css
@keyframes bounce {
0%, 100% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(-20px);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
```
## Optimización de Rendimiento
### Usar transform y opacity
```css
/* Bien - acelerado por hardware */
.box {
transform: translateX(100px);
opacity: 0.5;
}
/* Evitar - dispara layout */
.box {
margin-left: 100px;
width: 50%;
}
```
### Will Change
```css
.animated {
will-change: transform, opacity;
}
```
### Aceleración GPU
```css
.box {
transform: translateZ(0); /* Forzar capa GPU */
backface-visibility: hidden;
}
```
## Accesibilidad
### Respetar prefers-reduced-motion
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
## Resumen
- Transiciones: `transition: propiedad duración timing-function retraso;`
- Keyframes: `@keyframes nombre { from {} to {} }` o sintaxis de porcentaje
- Propiedades de animación: nombre, duración, timing, retraso, iteration-count, direction, fill-mode
- Usar `transform` y `opacity` para mejor rendimiento
- Usar `prefers-reduced-motion` para accesibilidad
- Aceleración por hardware: `transform: translateZ(0)`
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →