Scribd
Importer
11 vues3 pages

Animation et Flexbox en CSS

@keyframes permet de créer des animations en définissant des changements d'état d'un élément dans le temps. La propriété transition permet d'animer en douceur les changements de propriétés, tandis que les pseudo-classes ciblent des états spécifiques d'un élément. Flexbox facilite l'alignement et la disposition des éléments dans un conteneur de manière moderne.

Transféré par

zita.shamy
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
11 vues3 pages

Animation et Flexbox en CSS

@keyframes permet de créer des animations en définissant des changements d'état d'un élément dans le temps. La propriété transition permet d'animer en douceur les changements de propriétés, tandis que les pseudo-classes ciblent des états spécifiques d'un élément. Flexbox facilite l'alignement et la disposition des éléments dans un conteneur de manière moderne.

Transféré par

zita.shamy
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

DOCUMENT CSS : @keyframes, transition, pseudo-classes, Flexbox

1. @keyframes - Animer avec CSS


---------------------------------
La règle @keyframes permet de créer des animations. Elle définit comment un élément doit
changer au fil du temps.

Exemple :
@keyframes monAnimation {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}

Ou avec pourcentage :
@keyframes monAnimation {
0% { transform: scale(0); }
100% { transform: scale(1); }
}

Application :
.monElement {
animation: monAnimation 2s ease-in-out forwards;
}

2. transition - Animation sur un changement


--------------------------------------------
transition permet de faire une animation douce quand une propriété change.
Exemple :
button {
background-color: blue;
transition: background-color 0.3s ease;
}

button:hover {
background-color: red;
}

3. Pseudo-classes CSS
----------------------
Les pseudo-classes ciblent un état particulier d-un élément.

Exemples :
:hover -> souris au-dessus
:focus -> champ activé
:active -> élément cliqué
:first-child -> premier enfant
:last-child -> dernier enfant
:nth-child(n) -> nième enfant
:not(selector) -> tous sauf ce sélecteur

Exemple :
input:focus {
border-color: green;
}

4. Flexbox - Mise en page moderne


----------------------------------
Flexbox permet d-aligner facilement les éléments dans un conteneur.

Conteneur :
display: flex;
flex-direction: row | column;
justify-content: center | space-between;
align-items: center;
gap: 10px;

Enfant :
flex: 1;
align-self: center;

Exemple :
.container {
display: flex;
justify-content: space-between;
align-items: center;
}

HTML :
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Résumé :
@keyframes = animations personnalisées
transition = animations douces sur changements
pseudo-classes = états d-un élément ciblés
flexbox = disposition flexible et moderne

Vous aimerez peut-être aussi