Université Mohammed Premier

École Supérieure de Technologie de Nador

Niveau : S1

CSS3
Cascading Style Sheets 3

Contenu :
• Feuille de style. Définition.
• Où écrire une feuille de style
• Feuille de style de type « balise », « id » & « classe »
• Les sélecteurs avancés
• Autres propriétés CSS
• Création d’un Menu
Présenté par :
Redouane ESBAI
Année universitaire : 2024 / 2025
Codification des couleurs

Codification des couleurs (Rappel)

Les navigateurs admettent 3 méthodes possibles pour la déclaration d'une couleur :

Méthode Exemple Notes

La couleur est désignée par son nom en anglais.

Couleurs nommées background-color : grey
Il n'y a que 16 noms de couleurs normalisés par le W3C

Couleurs en La couleur est désignée par son code hexadécimal : les deux premiers digits correspondent à
background-color : #808080
hexadécimal la valeur de rouge, les deux suivants le vert et les deux derniers le bleu

Couleurs La couleur est définie par trois nombres décimaux qui peuvent prendre les valeurs de 0 à 255
background-color : RGB( 128,128,128 )
décomposées indiquant respectivement le taux de rouge, le taux de vert et le taux de bleu.
Unités de mesure

Les unités absolues

Les unités absolues ne sont influencées par aucune autre dimension. Elles sont utilisées pour exprimer une longueur, comme un
padding, une hauteur de bloc, la taille des caractères, etc.

Les unités absolues sont les suivantes :

• Les pixels (px) div {
• Les pouces (in)
width : 150px ;
• Les centimètres (cm)
height : 150px ;
• Les millimètres (mm)
• Les picas (pc) }

• Les points (pt)

Le pixel et le point sont les unités les plus utilisées.

Relation entre les unités de mesure : 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px.

Unités de mesure

Les unités relatives au texte

Les unités relatives font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent.

Les unités dites « relatives au texte » sont utilisées pour harmoniser les éléments d’un design. Ces unités sont les suivantes:

• em : proportionnelle à la taille de la police de l’élément parent ou du document. Par défaut, 1 em = 16 px si aucune

taille de police n’est définie.

• rem : fait toujours référence à la taille de la police de l’élément racine. Elle dépend du font-size définit par défaut.

• ex : relative à la hauteur de la police actuelle en minuscule (très rarement utilisée).

• ch : relative à la largeur du caractère “0” (peu utilisée).

Unités de mesure

Les unités relatives au viewport

Les unités relatives au viewport permettent aux éléments de s’adapter à la taille de la fenêtre du navigateur. Elle sont
essentielles pour mettre en place un design responsive :

• La hauteur du viewport (vh)

• La largeur du viewport (vw)

• Le viewport minimum (vmin)

• Le viewport maximum (vmax)

Fonts
Propriétés du texte en CSS3

Type de la police: font-family

C’est une suite de noms de polices.

Cinq familles sont distinguées : serif (Times, etc.), sans-serif (Arial, Helvetica, etc.), cursive, monospace, Fantasy.

Les polices sont associées de préférence « en pile ». Dans l’exemple suivant, si le visiteur du site n’a pas la police Helvetica Neue
sur sa machine, on passe automatiquement à la suivante et ainsi de suite.

p{
font-family:'Helvetica Neue',Helvetica,sans-serif;
}

@font-face {
font-family: 'newFont';
src: url('PARCHM.ttf');
Règle @font-face : permet d’importer un font (extension .ttf)
}
p{
font-family:'newFont';
}
Les sélecteurs complexes

Le sélecteur universel "*"

Ce sélecteur permet de cibler tous les nœuds d'un document.

Exemple :
le code suivant permet de colorier tous les textes du document en marron.

*{
color : brown;
}
Les sélecteurs complexes
Les sélecteurs d'attribut "[ ]"

Ce sélecteur permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
• [attr] : cible un élément qui possède un attribut attr.

• [attr=valeur] : cible un élément qui possède un attribut attr dont la valeur est exactement valeur.

• [attr~=valeur] : cible un élément qui possède un attribut attr dont la valeur est égale à la valeur spécifiée.

• [attr|=valeur] : cible un élément qui possède un attribut attr dont la valeur est exactement égale à valeur ou dont la valeur
commence par valeur suivi immédiatement d'un tiret.

• [attr^=valeur] : cible un élément qui possède un attribut attr dont la valeur commence par valeur.

• [attr$=valeur] : cible un élément qui possède un attribut attr dont la valeur se termine par valeur.

• [attr*=valeur] : cible un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur
dans la chaine de caractères.
Les sélecteurs complexes

Les sélecteurs d'attribut "[ ]"

Exemple :
/* Les éléments <a> avec un attribut title */
a[title] { color : purple; }
/* Les éléments <a> avec un href qui correspond à "https ://example.org" */
a[href="https ://example.org"] { color : green; }
/* Les éléments <a> dont href contient "example" */
a[href*="example"] { font-size : 2em; }
/* Les éléments <a> dont href finit par ".org" */
a[href$=".org"] { font-style : italic; }
/* Les éléments <a> dont l'attribut class contient le mot logo */
/* comportement identique à a.logo */
a[class~="logo"] {
padding : 2px;
}
Les sélecteurs complexes

Combinateur de voisin direct "+"

Ce combinateur permet de sélectionner un élément uniquement si :

• Cet élément « suit » un élément donné et que
• Les deux éléments sont les fils d'un même élément parent.

Exemple :
li :first-of-type + li {
color : red;
}

<ul> Résultat :
<li>Un</li>
<li>Deux</li> • Un
<li>Trois</li> • Deux
</ul> • Trois
Les sélecteurs (pseudo-classes)

Pseudo-classes

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel
l'élément doit être pour être ciblé par la déclaration.

Exemple : La pseudo-classe :hover permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur
survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).
Les sélecteurs (pseudo-classes)
Liste des pseudo-classes
sélecteur exemple Description
: checked input :checked Tout élément de formulaire sélectionné
: désactivé input :disabled Sélectionnez tous les éléments de formulaire désactivé
: vide p :empty Sélectionnez tous les éléments p aucun enfant
: activé input :enabled Sélectionnez tous les éléments de formulaire activés
: First-of-Type p :first-of-type Sélectionnez chaque élément parent et les premiers éléments p p élément enfant
: In-gamme input :in-range Sélectionnez les valeurs des éléments dans une plage spécifiée
: invalide input :invalid Sélectionnez tous les éléments non valides
: Last-child p :last-child Sélectionnez tous les éléments p dans le dernier élément enfant
: Dernier-type p :last-of-type Sélectionner chaque élément p est le dernier élément d'un élément parent p
: Non (sélecteur) :not(p) Sélectionnez tous les éléments autres que le p
: Nth-child (n) p :nth-child(2) Sélectionner tous les éléments p dans le deuxième sous-élément
: Nth-last-child (n ) p :nth-last-child(2) Sélectionnez tous les éléments de l'inverse de p second élément enfant
: Nth-last-of-type (n) p :nth-last-of-type(2) Sélectionner tous les éléments p est l'inverse du deuxième sous-élément p
: Nth-of-type (n ) p :nth-of-type(2) Sélectionnez tous les éléments p dans le deuxième sous-élément pour la p
: Seulement-of-type p :only-of-type Sélectionnez tout simplement un élément de p éléments de l'enfant
: Seul enfant p :only-child Sélectionnez tout simplement un élément de p éléments de l'enfant
: en option input :optional Choisissez pas l'attribut "nécessaire" de l'élément
: Out-of-range input :out-of-range Sélectionnez élément d'attribut en dehors de la plage de valeurs
Les sélecteurs (pseudo-classes)
Liste des pseudo-classes

sélecteur exemple Description

: Lecture seule input :read-only Sélectionnez l'attribut de lecture seule des attributs de l'élément
: Lecture-écriture input :read-write Choisir de ne pas en lecture seule attribut des propriétés de l'élément
: nécessaire input :required Choisissez "nécessaire" attribut spécifie les propriétés de l'élément
: root root Sélectionnez l'élément racine du document
: cible #news :target Sélectionnez l'élément de l'activité en cours (cliquez sur une URL qui contient le nom de l'ancre)
: valide input :valid Sélectionnez toutes les valeurs valides pour les propriétés
: lien a :link Sélectionnez tous les liens non visités
: visited a :visited Sélectionnez tous les liens visités
: actif a :active Select est un lien actif
: hover a :hover Placez la souris sur l'état de liaison
: focus input :focus Après avoir sélectionné l'élément d'entrée a le focus
: First-letter p :first-letter Sélectionnez la première lettre de chaque élément <p>
: First-line p :first-line Sélectionnez la première ligne de chaque élément <p>
: First-child p :first-child L'élément sélecteur correspond à tout élément appartenant au premier élément enfant
: avant p :before Insérez le contenu avant chaque élément <p>
: après p :after Insérez le contenu après chaque élément <p>
: Lang (langue) p :lang(it) Sélection de l'attribut lang élément <p> à une valeur de départ
Types de positionnement

Le principe du positionnement en CSS permet de définir l’emplacement des boites générées pour chaque élément de la page.

Il existe trois mécanismes de positionnement de base en CSS :

1. Le flux normal : consiste à garder le flux normal des éléments selon leur ordre et leur type (bloc , inline)

2.La propriété « position »

• Relative
• Absolue
3.La propriété « float »
• Définit la position flottante d’un élément à droite (valeur right) ou à gauche (valeur left) dans un document (ou dans la
boîte conteneur).
Types de positionnement

La propriété CSS float

La propriété float est utilisée pour positionner et formater le contenu. Par exemple, faire flotter une image à gauche du texte
dans un conteneur.

La propriété float peut avoir les valeurs suivantes :

• left - L'élément flotte à gauche de son conteneur.

• right - L'élément flotte à droite de son conteneur.

• none- La valeur par défaut, l'élément ne flotte pas.

Types de positionnement

La propriété CSS float

Exemple 1 : sans float

img{
width : 100px;
height : 100px;
}
Si la COVID-19 se propage dans votre communauté, protégez-vous en prenant quelques précautions
Simples, comme maintenir une distance physique avec autrui, porter un masque, bien ventiler les pièces,
éviter les rassemblements, vous laver les mains et tousser dans votre coude replié ou un mouchoir. Suivez
Les recommandations locales là où vous vivez et travaillez. Faites tout cela!
flux normal
Exemple 2 : avec float = left

img{
width : 100px; Si la COVID-19 se propage dans votre communauté, protégez-vous en prenant quelques précautions
Simples, comme maintenir une distance physique avec autrui, porter un masque, bien ventiler les pièces,
height : 100px; éviter les rassemblements, vous laver les mains et tousser dans votre coude replié ou un mouchoir. Suivez
float : left; Les recommandations locales là où vous vivez et travaillez. Faites tout cela!
}
Propriété float en CSS
Utilisation des conteneurs Flex (FlexBox)

Pourquoi utiliser Flexbox ?

Avant l’insertion de la méthode Flexbox, il existait quatre modes de mise en page :
• Block, pour les sections d'une page Web
• Inline, pour le texte
• Tableau, pour les données de tableau à deux dimensions
• Position, pour la position explicite d'un élément

La méthode Flexbox facilite la structuration et la mise en page souple et réactive, sans utiliser les marges et le positionnement.
La page est décomposée en un agencement de boites qui peuvent se suivre (boites voisines ) et s'imbriquer (boites ancêtres).
En définissant les tailles et les interactions entre les différentes boîtes, on obtient une adaptation automatique des éléments de la page lorsqu'elle est redimensionnée.

Comment utiliser Flexbox ?

Le conteneur flex (flex container) ou bien la boite dite « parent », contient les éléments flex (flex items) ou bien les boites « enfants ».
L'idée est définir, en utilisant les différentes propriétés CSS, l'ordre des "boites enfants" dans la "boite parent".
Utilisation des conteneurs Flex (FlexBox)

Définir le conteneur flex (flex container)

Le conteneur est une balise html qui contient d'autres balises html.
Dans l'exemple ci-dessous, La conteneur correspond à la balise <div> pour laquelle on a défini la classe « .conteneur".
Cette balise <div> contient deux balises <div> et une balise <figure>. Ces dernières deviennent alors des "éléments flex" (flex items) mis en évidence ici par la classe
".element".

<div class="conteneur">

<div class="element">Élément 1</div>

<figure class"element">Élément 2</figure>

<div class"element">Élément 3</div>

</div>

La boite se transforme en "conteneur flex" dès lors qu'on lui attribue la propriété CSS "flex"comme montré dans le code CSS suivant :

.conteneur {
display : flex;
}
Utilisation des conteneurs Flex (FlexBox)

Définir les axes du conteneur flex avec la propriété flex-direction

Axe principal : main axis
Le conteneur flex possède un axe principal (main axis) sur lequel les éléments flex peuvent se suivre.
L’axe principal est défini par la propriété flex-direction qui peut prendre les valeurs suivantes:

• row : les éléments flex se suivent sur une ligne, ce qui correspond à la direction normale du sens d'écriture du document
• row-reverse : les éléments flex se suivent sur une ligne en ordre inversé. ce qui correspond à la direction inverse du sens d'écriture du document
• column : les éléments flex se suivent sur une colonne. column-reverse : les éléments flex se suivent sur une colonne en ordre inversé
Utilisation des conteneurs Flex (FlexBox)

Définir les axes du conteneur flex avec la propriété flex-direction

Axe secondaire : cross axis
Le choix de l'axe principal impose la direction de l'axe secondaire (cross axis) qui lui est toujours perpendiculaire.

flex-direction: row flex-direction: column

axe principal Axe 2daire
(cross axis)
Axe 2daire

élément flex 1 élément flex 2 élément flex 3 élément flex 1 élément flex 2 élément flex 3

conteneur flex conteneur flex

axe principal

Figure 43: Exemple de flex-direction row Figure 44: Exemple de flex-direction column

Le choix des axes est essentiel car leur orientation va déterminer le résultat de l'application des propriétés suivantes :
justify-content : définit comment les éléments flex sont positionnés le long de l'axe principal ;
align-items : définit comment les éléments flex sont positionnés le long de l'axe secondaire ;
align-self : définit comment un seul élément flex est positionné le long de l'axe secondaire.
Utilisation des conteneurs Flex (FlexBox)

Positionner les éléments à l'intérieur d'un conteneur flex

Les éléments flexibles peuvent être alignés, justifiés et distribués le long des axes de leur conteneur grâce à différentes propriétés.
Dans l’exemple suivant, on a choisi une direction "row", ce qui signifie que l'axe principal est l'axe horizontal et que l'axe secondaire est l'axe vertical.

<div class="conteneur"> .conteneur {

<div class="element1">élément 1</div> background-color : blue ;
<div class="element2">élément 2</div> height : 230px;
<div class="element3">élément 3</div> width : 500px;
<div class="element4">élément 4</div> display : flex;
</div> flex-direction : row;
align-items : stretch | flex-start | flex-end | center | baseline;
justify-content : flex-start | flex-end | center | space-around | space-between | space-evenly;
}
Utilisation des conteneurs Flex (FlexBox)

Aligner le long de l'axe principal : la propriété "justify-content"

La propriété "justify-content" permet d'aligner les éléments le long de l'axe principal dans la direction définie par "flex-direction".
Les valeurs de la propriété "justify-content" : flex-start, flex-end, center, space-around, space-between et space-evenly.

Exemple 1 : justify-content : flex-start => les éléments flexibles sont placés à partir de la ligne de début du conteneur sur l'axe principal.

Élément 1 Élément 2 Élément 3 Élément 4

Exemple de la propriété justify-content : flex-start

Utilisation des conteneurs Flex (FlexBox)

Aligner le long de l'axe principal : la propriété "justify-content"

Exemple 2 : justify-content : flex-end => les éléments flexibles sont placés à partir de la ligne de fin du conteneur sur l'axe principal.

Élément 1 Élément 2 Élément 3 Élément 4

Figure 46: Exemple de la propriété justify-content : flex-end

Exemple 3 : justify-content : center => les éléments flexibles sont centrés le long de l'axe principal.

Élément 1 Élément 2 Élément 3 Élément 4

Figure 47: Exemple de la propriété justify-content : center

Utilisation des conteneurs Flex (FlexBox)

Aligner le long de l'axe principal : la propriété "justify-content"

Exemple 4 : justify-content : space-between => l'espace disponible est réparti de façon égale entre chaque élément.

Élément 1 Élément 2 Élément 3 Élément 4

Figure 48: Exemple de la propriété justify-content : space-between

Exemple 5 : justify-content : space-around => l'espace disponible est réparti de façon égale entre chaque élément, y compris au début et à la fin.

Élément 1 Élément 2 Élément 3 Élément 4

Figure 49: Exemple de la propriété justify-content : space-arpound

Utilisation des conteneurs Flex (FlexBox)

Aligner le long de l'axe principal : la propriété "justify-content"

Exemple 6 : justify-content : space-evenly => l'espace disponible est réparti de façon égale entre chaque élément avec un espace entier au
début et à la fin.

Élément 1 Élément 2 Élément 3 Élément 4

Exemple de la propriété justify-content : space-evenly

Utilisation des conteneurs Flex (FlexBox)

Aligner le long de l'axe secondaire : la propriété "align-items"

La propriété "align-items" peut prendre 5 valeurs : stretch, flex-start, flex-end, center et baseline.

Exemple 1 : align-items : stretch => les éléments flexibles sont étirés le long de l'axe secondaire.

Élément 1 Élément 2 Élément 3 Élément 4

Exemple de la propriété align-items : stretch

Utilisation des conteneurs Flex (FlexBox)

Aligner le long de l'axe secondaire : la propriété "align-items"

Exemple 1 : align-items : flex-start => les éléments flexibles sont alignés sur la ligne de début de l'axe secondaire.

Élément 4
Élément 1 Élément 3
Élément 2

FExemple de la propriété align-items : flex-start

Utilisation des conteneurs Flex (FlexBox)

Aligner le long de l'axe secondaire : la propriété "align-items"

Exemple 3 : align-items : flex-end => les éléments flexibles sont alignés sur la ligne de fin de l'axe secondaire.

Élément 2
Élément 1 Élément 3
Élément 4

Exemple de la propriété align-items : flex-end

Utilisation des conteneurs Flex (FlexBox)

Aligner le long de l'axe secondaire : la propriété "align-items"

Exemple 4 : align-items : center => les éléments flexibles sont centrés sur la ligne d'axe secondaire.

Élément 1 Élément 2 Élément 3 Élément 4

Exemple de la propriété align-items : center

Utilisation des conteneurs Flex (FlexBox)

Aligner le long de l'axe secondaire : la propriété "align-items"

Exemple 5 : align-items : baseline => les éléments flexibles sont alignés sur leur ligne de base (les textes sont alignés).

Élément 1 Élément 2 Élément 3 Élément 4

Exemple de la propriété align-items : baseline

 • Exploiter les propriétés CSS permettant de définir les règles
ADAPTER UNE PAGE WEB AU DISPOSITIF typographiques et de mise en page
D’AFFICHAGE • Utiliser les propriétés de positionnement afin de structurer
les contenus

2 heures
ADAPTER UNE PAGE WEB AU DISPOSITIF 1. Introduction au Responsive Design
D’AFFICHAGE 2. Media Queries
Introduction au Responsive Design

Introduction au Responsive Design

• Les pages Web peuvent être consultées à l'aide de nombreux types d’appareils : ordinateurs de bureau, tablettes et téléphones. Ainsi, les pages Web ne doivent pas
omettre d'informations pour s'adapter aux appareils plus petits, mais plutôt adapter leur contenu pour s’afficher correctement sur n'importe quel appareil utilisé
• La conception Web réactive (Responsive Design) rend la page Web compatible et adaptable à tous les appareils. Elle est basée uniquement sur HTML et CSS (elle n'est
pas un programme ou un code JavaScript)

Principe du responsive design

• Le Responsive web design consiste à utiliser les langages CSS et HTML pour redimensionner, masquer, réduire, agrandir ou déplacer le contenu d’une page pour
s’adapter à l’écran d’affichage
ADAPTER UNE PAGE WEB AU DISPOSITIF 1. Introduction au Responsive Design
D’AFFICHAGE 2. Media Queries
Les media queries

Les media queries

La règle @media, introduite dans CSS2, permet de définir différentes règles de style pour différents types de médias.

Les medias queries dans CSS3 ont étendu l'idée des types de médias CSS2 : examiner la capacité du périphérique au lieu de chercher son type.

Les requêtes multimédias peuvent être utilisées pour vérifier de nombreuses propriétés, telles que :

• Largeur et hauteur de la fenêtre

• Largeur et hauteur de l'appareil
• Orientation (mode paysage ou portrait)
• Résolution
Les media queries

Les media queries

L'exemple suivant change la couleur d'arrière-plan selon la règle suivante :

• Si la largeur de la fenêtre est 480 px au minimum, la couleur est le bleu clair

• Si la largeur de la fenêtre est 200 px au minimum, la couleur est le lightgreen
• Si la largeur de la fenêtre est inférieure à 200 px, la couleur reste blanche

@media screen and (min-width : 200px) {

body {
background-color : rgb(144, 174, 238);
}
}
@media screen and (min-width : 480px) {
body {
background-color : lightgreen;
}
}
Les media queries

Les media queries

Dans cet exemple, media queries est utilisée pour créer un menu de navigation réactif dont la conception varie selon les tailles d'écran.

.demo { <div class = "demo">

overflow : hidden; <a href = "#">Home</a>
background-color : blue; <a href = "#">About</a>
} <a href = "#">Tutorials</a>
.demo a { <a href = "#">QA</a>
float : left; <a href = "#">Videos</a>
display : block; <a href = "#">Contact</a>
color : white; </div>
text-align : center;
padding : 10px;
text-decoration : none;
}
@media screen and (max-width : 600px) {
.demo a {
float : none;
width : 100%;
}
}
 • Manipuler des propriétés d’animation
CRÉER DES ANIMATIONS • Appréhender les types d’animation

• Utiliser des keyFrames

6 heures
 1. Manipulation des propriétés d’animation
CRÉER DES ANIMATIONS 2. Types d’animation (transition, transformation…)
3. Utilisation des keyFrames
Manipulation des propriétés d’animation

Propriétés d’animation
La propriété raccourcie (ou bien les propriétés détaillées correspondantes ) est utilisée pour créer une animation CSS. Elle permet de configurer la durée, le minutage et
d'autres détails de l'animation.
L'apparence visuelle de l'animation est définie en utilisant des règles CSS de mise en forme au sein de la règle @keyframes.

Les propriétés détaillées rattachées à la propriété raccourcie animation sont :

animation-name : Cette propriété déclare un nom à l’animation (utilisé comme référence à l'animation pour la règle @keyframes ).

animation-delay : Cette propriété définit le délai entre le chargement de l'élément et démarrage de l'animation.

animation-duration : Cette propriété définit la durée d'un cycle de l'animation.

animation-iteration-count : Cette propriété détermine le nombre de répétition de l'animation. Pour répéter une animation infiniment, On utilise la valeur infinite.

animation-direction : Cette propriété précise si l'animation doit alterner entre deux directions de progression (faire des allers-retours) ou recommencer au début à
chaque cycle de répétition.
Manipulation des propriétés d’animation

Propriétés d’animation

animation-timing-function : Cette propriété configure la fonction de minutage d'une animation.

animation-fill-mode : Cette propriété indique les valeurs à appliquer aux propriétés avant et après l'exécution de l'animation.

animation-play-state : Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.
 1. Manipulation des propriétés d’animation
CRÉER DES ANIMATIONS 2. Types d’animation (transition, transformation…)
3. Utilisation des keyFrames
Types d’animation

Animations CSS
CSS permet l'animation d'éléments HTML sans utiliser JavaScript

Une animation permet à un élément de passer progressivement d'un style à un autre en modifiant les propriétés CSS

Les types d’animations en CSS :

• Les transformations
• Les transitions
Types d’animation

Les transformations 2D
Les transformations CSS 2D permettent de déplacer, faire pivoter, mettre à l'échelle et incliner des éléments.

La méthode translate() La méthode rotate()

Exemple : déplacer l'élément <div> de 50 pixels vers la droite et de Exemple : faire pivoter l'élément <div> dans le sens des aiguilles d'une montre de
100 pixels vers le bas par rapport à sa position actuelle : 20 degrés :

div { div {
width : 300px; width : 300px;
height : 100px; height : 100px;
background-color : cyan; background-color : cyan;
border : 1px solid black; border : 1px solid black;
} }
div :hover{ div :hover{
transform : translate(50px,100px); transform : rotate(20deg);
} }
Types d’animation

Les transformations 2D

La méthode scale() La méthode skew()

Exemple : augmenter la taille de l'élément <div> de deux fois sur sa Exemple : incliner l'élément <div> de 20 degrés le long de l'axe X et de 10
largeur et trois fois sa hauteur : degrés le long de l'axe Y :

div { div {
width : 300px; width : 300px;
height : 100px; height : 100px;
background-color : cyan; background-color : cyan;
border : 1px solid black; border : 1px solid black;
} }
div :hover{ div :hover{
transform : scale(2,3); transform : skew(20deg,10deg);
} }
Types d’animation

Transitions CSS
Les transitions CSS permettent de modifier les valeurs des propriétés sur une durée donnée.
Exemple : un élément <div> rouge de 100 px * 100 px subit un effet de transition pour la propriété width, d'une durée de 2 secondes :

div {
width : 100px;
height : 100px;
background : red;
transition : width 2s;
}

Lorsqu'un utilisateur passe la souris sur l'élément <div>, une nouvelle valeur pour la propriété width s’applique.
L'effet de transition démarre lorsque la propriété CSS spécifiée (largeur) change de valeur.

div {
div :hover {
transition :width 2s, height 4s;
width : 300px;
}
}
 1. Manipulation des propriétés d’animation
CRÉER DES ANIMATIONS 2. Types d’animation (transition, transformation…)
3. Utilisation des keyFrames
Utilisation des keyFrames

La règle @keyframes
La spécification d’un style CSS à l'intérieur de la règle @keyframes permet à une animation de passer progressivement du style actuel au nouveau style.

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

/* The element to apply the animation to */

div {
width : 100px;
height : 100px; définit le nom de l’animation
background-color : red;
animation-name : example;
animation-duration : 4s; définit la durée de l’animation
}
Utilisation des keyFrames

La règle @keyframes

Exemple 2 :

@keyframes example {
0% {background-color : red;}
25% {background-color : yellow;}
50% {background-color : blue;}
100% {background-color : green;}
}
/* The element to apply the animation to */
div {
width : 100px;
height : 100px;
background-color : red;
animation-name : example;
animation-duration : 4s;
}
Utilisation des keyFrames

La règle @keyframes

Exemple 3 :

@keyframes example {
0% {background-color :red; left :0px; top :0px;}
25% {background-color :yellow; left :200px; top :0px;}
50% {background-color :blue; left :200px; top :200px;}
75% {background-color :green; left :0px; top :200px;}
100% {background-color :red; left :0px; top :0px;}
}

div {
width : 100px;
height : 100px;
position : relative;
background-color : red;
animation-name : example;
animation-duration : 4s;
}