El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Les transicions de CSS permeten canviar els valors de les propietats CSS de manera suau durant un període de temps específic. Això pot millorar l'experiència de l'usuari fent que els canvis en l'estil siguin més fluids i atractius visualment.

Conceptes Clau

Propietats de Transició: Les propietats que es poden animar.
Durada de la Transició: El temps que triga la transició.
Funció de Temporització: Defineix la velocitat de la transició.
Retard de la Transició: El temps que espera abans de començar la transició.

Sintaxi de les Transicions

La propietat transition és un abreujament per a les següents propietats individuals:

transition-property: Defineix les propietats CSS a les quals s'aplicarà la transició.
transition-duration: Defineix la durada de la transició.
transition-timing-function: Defineix la funció de temporització de la transició.
transition-delay: Defineix el retard abans que comenci la transició.

Exemple de Sintaxi

.element {
    transition: property duration timing-function delay;
}

Exemple Pràctic

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 2s, height 2s, background-color 2s;
}

.box:hover {
    width: 200px;
    height: 200px;
    background-color: red;
}

En aquest exemple, quan l'usuari passa el ratolí per sobre de l'element amb la classe .box, la seva amplada, alçada i color de fons canviaran de manera suau durant 2 segons.

Propietats de Transició

`transition-property`

Defineix les propietats CSS a les quals s'aplicarà la transició.

.box {
    transition-property: width, height, background-color;
}

`transition-duration`

Defineix la durada de la transició. Pot especificar-se en segons (s) o mil·lisegons (ms).

.box {
    transition-duration: 2s;
}

`transition-timing-function`

Defineix la velocitat de la transició. Alguns valors comuns són:

ease: Comença lentament, accelera i després acaba lentament.
linear: La mateixa velocitat de principi a fi.
ease-in: Comença lentament i després accelera.
ease-out: Comença ràpidament i després desacelera.
ease-in-out: Comença i acaba lentament.

.box {
    transition-timing-function: ease-in-out;
}

`transition-delay`

Defineix el retard abans que comenci la transició.

.box {
    transition-delay: 1s;
}

Exercicis Pràctics

Exercici 1: Canviar el Color de Fons

Crea una transició que canviï el color de fons d'un element quan es passa el ratolí per sobre.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transició de Color de Fons</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 1s;
        }

        .box:hover {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Exercici 2: Ampliar i Canviar el Color

Crea una transició que ampliï l'element i canviï el color de fons quan es passa el ratolí per sobre.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ampliar i Canviar el Color</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: width 2s, height 2s, background-color 2s;
        }

        .box:hover {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Errors Comuns i Consells

Oblidar la Durada de la Transició: Si no especifiques una durada, la transició no es produirà.
No Especificar les Propietats Correctes: Assegura't que les propietats que vols animar estan incloses a transition-property.
Funció de Temporització Incorrecta: Experimenta amb diferents funcions de temporització per obtenir l'efecte desitjat.

Conclusió

Les transicions de CSS són una eina poderosa per millorar l'experiència de l'usuari amb canvis suaus i atractius en l'estil dels elements. Amb una comprensió bàsica de les propietats de transició, pots començar a crear efectes visuals impressionants en els teus projectes web.

Transicions de CSS

Conceptes Clau

Sintaxi de les Transicions

Exemple de Sintaxi

Exemple Pràctic

Propietats de Transició

`transition-property`

`transition-duration`

`transition-timing-function`

`transition-delay`

Exercicis Pràctics

Exercici 1: Canviar el Color de Fons

Exercici 2: Ampliar i Canviar el Color

Errors Comuns i Consells

Conclusió

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