Exercice Transition Animation Correction partage

Transition & Animation HTML5&CSS
Série 2
Question
1
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.
5
Reponse
HTML : Construisez une page HTML
de base.
2
4
2020-2021
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.
CSS : Adaptez les propriétés de la
classe forme-carre pour obtenir un
carré coloré de 100 pixels de côté.
HTML : Ajoutez une seconde classe
CSS à l’élément <div> que vous
nommerez transition-1.
6
7
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 formecarre et leur appliquer des transitions
différentes avec des classes transition1, transition-2, etc.
CSS : En utilisant la classe transition1 et la pseudo-classe hover, ajoutez
un effet de changement de couleur
lorsque l’on survole le carré avec la
souris.
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page1
Transition & Animation HTML5&CSS
Série 2
8
9
10
11
13
14
2020-2021
CSS : En utilisant la classe transition1, ajoutez un effet de transition lors
du survol du carré avec les critères
suivants :
Durée de la transition :
2 secondes.
HTML : Dupliquez
l’élément <div> du carré et
attribuez à la copie la
classe transition-2 à la place
de transition-1.
CSS : En utilisant la classe transition2, ajoutez une bordure épaisse
lorsque l’on survole le carré avec la
souris.
CSS : Ajoutez la propriété boxsizing avec la valeur borderbox pour que la bordure fasse partie
des 100 pixels de votre carré.
CSS : En utilisant la classe transition2, 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).
HTML : Dupliquez
l’élément <div> du carré et
attribuez à la copie la
classe transition-3.
CSS : En utilisant la classe transition3, reproduisez l’effet de transition
illustré par l’image ci-dessous. La
15 transformation du carré en cercle
s’effectue avec la propriété CSS qui
permet d’arrondir les bordures…
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page2
Transition & Animation HTML5&CSS
Série 2
Question
1
2020-2021
Transition sur un bouton
Reponse
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.
CSS : En utilisant la classe btn, mettez
en forme le lien hypertexte afin qu’il
ressemble au modèle ci-dessous
2
3
4
5
6
HTML : Ajoutez une seconde classe
CSS au lien que vous nommerez btn-1.
CSS : En utilisant la classe btn et la
pseudo-classe adaptée, modifiez toutes
les couleurs du lien au survol de la
souris.
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.
CSS : En utilisant la classe btn et la
pseudo-classe active, ajoutez un effet
lorsque l’on clique sur le lien avec la
souris.
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page3
Transition & Animation HTML5&CSS
Série 2
Question
2020-2021
Reponse
HTML : Copiez et collez le code cidessous dans votre page web.
Ce code va correspondre un cadre
1 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.
CSS : Utilisez la classe call-content1 et call-content-2 pour appliquer des
couleurs d’arrière-plan différentes aux
deux blocs de contenu.
3
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.
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page4
Transition & Animation HTML5&CSS
Série 2
5
6
7
8
2020-2021
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.
CSS : Utilisez la classe call-content2 pour positionner le second conteneur
à côté du premier.
Rappelez-vous que vous avez affaire à
des carrés de 200 pixels.
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.
CSS : Utilisez les classes call et callcontent-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.
CSS : Ajoutez une transition pour
9 finaliser cet exercice.
Vous pouvez consulter la page :
https://juliencrego.com/exercices/transitions-en-css-pas-a-pas-css07/
3ème Science Info
Lycée Benane/Bodher
Prof : Ben Fredj Narjess
|page5
Transition & Animation HTML5&CSS
Série 2
2020-2021
Enoncé : Animation Ranbow
Vous allez animer un carré noir qui changera 5 fois de couleur et de position.
Vous allez lui attribuer les propriétés suivantes : une animation de 5 secondes qui va
se répéter à l’infini, à l’endroit puis à l’envers, avec une accélération linéaire.
Code HTML5
<div class="animation1">
</div>
Code CSS
.animation1 {
width: 100px;
height: 100px;
background-color: black;
position: relative;
animation: rainbow 5s linear infinite alternate;
}
@keyframes rainbow {
0% {background-color:purple; left:0px;
top:0px;}
25% {background-color:blue; left:200px;
top:0px;}
50% {background-color:green; left:200px;
top:200px;}
75% {background-color:yellow; left:0px;
top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
Enoncé : Animation d’un titre
Animer un titre qui va faire des allers et retour.
Code HTML5
Code CSS
.animation2 {
animation: defile 3s infinite alternate;
font-size: 20px;
color: #e4087e;
font-weight: bold;
}
<p class="animation2">
@keyframes defile {
Ca s'en va et ça revient...
from {
margin-left: 100%;
</p>
}
3ème Science Info
Lycée Benane/Bodher
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
Prof : Ben Fredj Narjess
|page6
Série 2
Transition & Animation HTML5&CSS
2020-2021
Enoncé
Créer une animation à l’élément div pour changer son opacité. A l’état
initial une opacité totale, puis il deviendra transparent à l’état final.
Code HTML5
Code CSS
<div></div>
div {
margin-left: 50px;
width: 200px;
height: 200px;
background-color: coral;
Animation-name : fade ;
Animation-delay : 2s;
Animation-duration : 3s;
Animation-iteration-count : infinite;
}
@keyframes fade {
From {
Opacity : 1;
}
To {
Opacity : 0;
}
}
Enoncé
Créer une animation à l’élément div pour changer sa forme. A l’état initial
l’élément est un carré, puis il deviendra un cercle à l’état final.
Code HTML5
Code CSS
<div></div>
3ème Science Info
Lycée Benane/Bodher
div {
margin-left: 50px;
width: 200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s infinite alternate;
}
@keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
}
25% {
border-radius:10% 10% 10% 10%;
background:darksalmon;
}
50% {
border-radius:25% 25% 25% 25%;
Prof : Ben Fredj Narjess
|page7
Transition & Animation HTML5&CSS
Série 2
2020-2021
background:indianred;
}
}
75% {
border-radius:40% 40% 40% 40%;
background:lightcoral;
}
100% {
border-radius:50%;
background:darksalmon;
}
Enoncé
Créer une animation à l’élément div pour changer sa taille et sa
couleur.
Code HTML5
Code CSS
<div class="d1"></div>
3ème Science Info
Lycée Benane/Bodher
div{
width: 90%;
height: 200px;
margin: 0 auto 20px auto;
border: 2px solid black;
}
.d1{
background-color: orange;
animation-name: couleur;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes couleur{
from{
background-color: orange;
}
25%{
background-color: blue;
width: 75%
}
50%{
background-color: purple;
width: 50%
}
75%{
background-color: red;
width: 75%;
}
to{
background-color: orange;
}
}
Prof : Ben Fredj Narjess
|page8
Transition & Animation HTML5&CSS
Série 2
2020-2021
Enoncé
Créer une animation à titre pour qu’il clignote.
Code HTML5
Code CSS
<div>
<p> à force de
forger on devient
forgeron
</p>
</div>
3ème Science Info
Lycée Benane/Bodher
div{
background-color: #336699;
height: 50px;
width: 300px;
text-align: center;
}
p{
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 15px;
padding-top: 15px;
animation: shine 5s infinite linear;
}
@keyframes shine{
0%{
color: black;
}
100%{
color: white;
}
}
Prof : Ben Fredj Narjess
|page9