Feuille d'exercices Transitions & Animations HTML5 & CSS

Série 2
Transition & Animation HTML5&CSS 2020-2021
3ème Science Info
Lycée Benane/Bodher Prof : Ben Fredj Narjess |page1
Question
Reponse
1
HTML : Construisez une page HTML
de base.
2
HTML : Créez une feuille de style et
liez-la à la page HTML.
3
CSS : Personnalisez la police de
caractère du texte par défaut.
4
HTML : Insérez les éléments suivants
dans votre page HTML :
-Un titre de niveau 1 avec le texte :
Exercice 1 .
-Un élément <div> avec la
classe forme-carre.
5
CSS : Adaptez les propriétés de la
classe forme-carre pour obtenir un
carré coloré de 100 pixels de côté.
6
HTML : Ajoutez une seconde classe
CSS à l’élément <div> que vous
nommerez transition-1.
Cette méthode qui consiste à utiliser
plusieurs classes permet d’avoir des
classes génériques et des classes
spécifiques. Nous allons ainsi
pouvoir créer autant de carré s que
l’on souhaite avec la classe forme-
carre et l eur appliquer des transitions
différentes avec des classes transition-
1, transition-2, etc.
7
CSS : En utilisant la classe transition-
1 et la pseudo-classe hover, ajoutez
un effet de changement de couleur
lorsque l’on survole le carré avec la
souris.

Série 2
Transition & Animation HTML5&CSS 2020-2021
3ème Science Info
Lycée Benane/Bodher Prof : Ben Fredj Narjess |page2
8
CSS : En utilisant la classe transition-
1, ajoutez un effet de transition lors
du survol du carré avec les critères
suivants :
Durée de la transition :
2 secondes.
9
HTML : Dupliquez
l’élément <div> du carré et
attribuez à la copie la
classe transition-2 à la place
de transition-1.
10
CSS : En utilisant la classe transition-
2, ajoutez une bordure épaisse
lorsque l’on survole le carré avec la
souris.
11
CSS : Ajoutez la propriété box-
sizing avec la valeur border-
box pour que la bordure fasse partie
des 100 pixels de votre carré.
13
CSS : En utilisant la classe transition-
2, ajoutez un effet de transition lors
du survol du carré avec les critères
suivants :
-Durée de la transition :
2 secondes ;
-Délai avant le début de la
transition :
0,5 seconde ;
-Rythme de transition :
régulier (linéaire).
14
HTML : Dupliquez
l’élément <div> du carré et
attribuez à la copie la
classe transition-3.
15
CSS : En utilisant la classe transition-
3, reproduisez l’effet de transition
illustré par l’image ci-dessous. La
transformation du carré en cercle
s’effectue avec la propriété CSS qui
permet d’arrondir les bordures…

Série 2
Transition & Animation HTML5&CSS 2020-2021
3ème Science Info
Lycée Benane/Bodher Prof : Ben Fredj Narjess |page3
Transition sur un bouton
Question
Reponse
1
HTML : Insérez les éléments suivants
dans votre page HTML :
-Un titre de niveau 1 avec le texte :
Exercice 2 ;
-Un lien hypertexte sur le
texte Bouton avec la classe btn.
2
CSS : En utilisant la classe btn, mettez
en forme le lien hypertexte afin qu’il
ressemble au modèle ci-dessous
3
HTML : Ajoutez une seconde classe
CSS au lien que vous nommerez btn-1.
4
CSS : En utilisant la classe btn et la
pseudo-classe adaptée, modifiez toutes
les couleurs du lien au survol de la
souris.
5
CSS : En utilisant la classe btn, ajoutez
un effet de transition lors du survol du
lien avec les critères suivants :
 Durée : 0,5 seconde.
6
CSS : En utilisant la classe btn et la
pseudo-classe active, ajoutez un effet
lorsque l’on clique sur le lien avec la
souris.

Série 2
Transition & Animation HTML5&CSS 2020-2021
3ème Science Info
Lycée Benane/Bodher Prof : Ben Fredj Narjess |page4
Question
Reponse
1
HTML : Copiez et collez le code ci-
dessous dans votre page web.
Ce code va correspondre un cadre
composé de deux éléments de contenu
que nous allons animer.
2
CSS : Utilisez la classe call pour
dimensionner le conteneur et en faire
un carré de 200 pixels de côté.
Ajoutez-lui également une bordure.
3
CSS : Utilisez la classe call-content-
1 et call-content-2 pour appliquer des
couleurs d’arrière-plan différentes aux
deux blocs de contenu.
4
CSS : Utilisez la classe call-content pour
appliquer les mêmes dimensions aux
deux blocs de contenu que celle que
vous avez appliquées au conteneur
global.
Les deux blocs de contenu ont une
hauteur cumulée supérieure à celle du
bloc de conteneur global, ils vont donc
déborder. Vous pouvez observer le
débordement grâce à la bordure.

Série 2
Transition & Animation HTML5&CSS 2020-2021
3ème Science Info
Lycée Benane/Bodher Prof : Ben Fredj Narjess |page5
5
CSS : Utilisez la classe call-content pour
positionner les deux blocs de contenu
en absolu et la classe call pour
positionner le conteneur en relatif.
6
CSS : Utilisez la classe call-content-
2 pour positionner le second conteneur
à côté du premier.
Rappelez-vous que vous avez affaire à
des carrés de 200 pixels.
7
CSS : Le second contenu déborde du
conteneur principal. Utilisez la
propriété overflow sur le conteneur
principal pour masquer tout ce qui
dépasse.
8
CSS : Utilisez les classes call et call-
content-2 ainsi que la pseudo
classe hover pour repositionner le
second contenu lorsque l’on survol le
conteneur global.
Vous devez chaîner les deux classes. Le
survol d’un élément ayant un impact
sur un de ses enfants.
9
CSS : Ajoutez une transition pour
finaliser cet exercice.
Vous pouvez consulter la page :
https://juliencrego.com/exercices/transitions-en-css-pas-a-pas-css07/