Intermediocss
Transiciones y Animaciones
Crea interfaces dinamicas con transiciones CSS, keyframes y animaciones de alto rendimiento.
Transiciones
Las transiciones suavizan el cambio entre valores de propiedades CSS. Son ideales para hover, focus y cambios de estado.
css
1.button {
2 background: #3b82f6;
3 color: white;
4 padding: 0.75rem 1.5rem;
5 border-radius: 8px;
6 transform: translateY(0);
7 transition: all 0.2s ease;
8}
9
10.button:hover {
11 background: #2563eb;
12 transform: translateY(-2px);
13 box-shadow: 0 4px 12px rgb(59 130 246 / 0.4);
14}
15
16.button:active {
17 transform: translateY(0);
18}Animaciones con @keyframes
Las animaciones permiten secuencias complejas con multiples pasos. Se definen con
@keyframes y se aplican con la propiedad animation.css
1@keyframes fadeInUp {
2 from {
3 opacity: 0;
4 transform: translateY(20px);
5 }
6 to {
7 opacity: 1;
8 transform: translateY(0);
9 }
10}
11
12.card {
13 animation: fadeInUp 0.5s ease forwards;
14}
15
16@keyframes spin {
17 to { transform: rotate(360deg); }
18}
19
20.loader {
21 width: 2rem;
22 height: 2rem;
23 border: 3px solid #e5e7eb;
24 border-top-color: #3b82f6;
25 border-radius: 50%;
26 animation: spin 0.8s linear infinite;
27}Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (HTML)
Output