El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Animacions de CSS

Següent ►
►

Les animacions de CSS permeten canviar les propietats CSS de manera gradual durant un període de temps. Això pot afegir dinamisme i interactivitat a les pàgines web, millorant l'experiència de l'usuari. En aquesta secció, aprendrem com crear animacions utilitzant CSS.

Conceptes Clau

  1. Propietat @keyframes

La regla @keyframes defineix el comportament de l'animació. Especifica els estats inicials i finals de l'animació, així com els canvis intermedis.

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

  1. Propietat animation

La propietat animation aplica l'animació a un element. Té diverses sub-propietats que es poden especificar individualment o combinades en una sola línia.

Sub-propietats de animation:

  • animation-name: Nom de l'animació definida amb @keyframes.
  • animation-duration: Durada de l'animació.
  • animation-timing-function: Funció de temporització (ex. ease, linear, ease-in, ease-out, ease-in-out).
  • animation-delay: Retard abans que comenci l'animació.
  • animation-iteration-count: Nombre de vegades que es repeteix l'animació.
  • animation-direction: Direcció de l'animació (normal, reverse, alternate, alternate-reverse).
  • animation-fill-mode: Defineix com s'aplica l'animació abans i després de l'execució (none, forwards, backwards, both).
  • animation-play-state: Estat de reproducció de l'animació (running, paused).
.example {
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

  1. Sintaxi Combinada

És possible combinar totes les sub-propietats en una sola línia per simplificar el codi.

.example {
  animation: example 4s ease-in-out 1s infinite alternate forwards;
}

Exemple Pràctic

HTML

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animacions de CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box"></div>
</body>
</html>

CSS

/* Definició de l'animació */
@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

/* Aplicació de l'animació */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: move 3s ease-in-out infinite;
}

Explicació

  • La regla @keyframes move defineix una animació que mou l'element horitzontalment.
  • L'element amb la classe .box té una animació aplicada que dura 3 segons, utilitza la funció de temporització ease-in-out i es repeteix infinitament.

Exercicis Pràctics

Exercici 1: Canviar el Color de Fons

Crea una animació que canviï el color de fons d'un element de blau a verd i després a vermell en un cicle infinit.

Solució

@keyframes colorChange {
  0% { background-color: blue; }
  50% { background-color: green; }
  100% { background-color: red; }
}

.color-box {
  width: 100px;
  height: 100px;
  animation: colorChange 5s infinite;
}

Exercici 2: Rotació d'un Element

Crea una animació que faci girar un element 360 graus.

Solució

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: purple;
  animation: rotate 2s linear infinite;
}

Errors Comuns i Consells

Errors Comuns

  • Oblidar @keyframes: Assegura't de definir la regla @keyframes abans d'aplicar l'animació.
  • No especificar animation-duration: Sense una durada, l'animació no es reproduirà.
  • Utilitzar noms d'animació incorrectes: El nom de l'animació en animation-name ha de coincidir exactament amb el nom definit en @keyframes.

Consells

  • Utilitza animation-fill-mode per mantenir l'estat final: Això evita que l'element torni al seu estat inicial després de l'animació.
  • Experimenta amb animation-timing-function: Diferents funcions de temporització poden canviar dràsticament l'aparença de l'animació.

Conclusió

Les animacions de CSS són una eina poderosa per afegir interactivitat i dinamisme a les pàgines web. Amb la comprensió de les propietats bàsiques i la pràctica amb exemples, pots crear animacions atractives i eficients. En el següent tema, explorarem les transformacions de CSS per modificar l'aparença i la posició dels elements de manera més avançada.

◄ Anterior
◄
Següent ►
►

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats