Suite tp transition et animation 3STI
Application
Dans la partie navigation , créer un lien de l’élément « contacts » vers une page à créer nommé « contacter.html » ,
cette page contient le formulaire suivant :
Tous les champs sont obligatoires à saisir
Le champs age va contenir un nombre compris entre 18 et 120
En cliquant sur le bouton envoyer l’action à faire est d’ouvrir la page « succès.html »
Appliquer une animation sur le titre de la page « succès.html »
La marge haut de titre est 0px
L’animation nommé anim dure 3 secondes , se répète infiniment avec une direction alternative et inverse
Cette animation passe par 3 étapes :
0% : marge haut: 0px
50% : marge haut: 50px
100% : marge gauche: 40%
Correction :
body{margin-top: 0%; header h1{ nav{display: block;
background- padding-top: 5%; background-color:#FFFFFF;
color:aquamarine ; color: beige; border:outset;
} opacity: 0.6; width: 20%;
header{ font-family: 'Courier New', }
width: 80%; Courier, monospace; nav li{ list-style: none; }
margin-left: 10%; text-shadow: 1px 1px 2px nav li a{
margin-right: 10%; black; display: block;
height: 30vh; animation-duration: 5s; background-color: blue;
background-image: animation-name: anima; text-decoration: none;
url(Nabeul.jpg); } color: white;
background-size: 100% 30vh; main{display:flex; font-weight: bolder;
border: outset; margin-left: 10%; width: 60%;
transition-duration: 3s; margin-right: 10%; margin-bottom: 3%;
} } padding:3%;
transition: width;
transition-duration: 1s;}
Suite tp transition et animation 3STI
nav li a:hover{ @keyframes slidein Succès .css :
color:rgb(248, 20, 180); {
width: 80%; from { h1{
height: 5vh; margin-left: 100%; margin-top: 0px;
border-radius: 5px; width: 50%; animation-name: anim;
} } animation-duration: 3s;
section{display: block; to { animation-iteration-count:
background-color:#FFFFFF; margin-left: 0%; infinite;
border:outset; width: 100%; animation-direction: alternate-
width: 60%; } reverse;
padding-left: 1%; } }
} @keyframes anim {
aside{display: block; to{margin-top: 0px;}
background-color:#FFFFFF; 50%{margin-top: 50px;}
border:outset; @keyframes anima { 100%{margin-left: 40%;}
width: 20%; from { }
} padding-top: 0%;
aside img{ }
width: 100%; 50% {
transition: width; padding-top: 10%;
transition-duration: 2s; }
} to {
aside iframe{ padding-top: 5%;
width: 100%; }
height:50vh; }
} footer{ animation-duration:
footer{ 20s;
margin-left: 10%; animation-name: slideonB;}
margin-right: 10%;
text-align: center; @keyframes slideonB {
} 0% {
aside img:hover{
width:120%; color: blueviolet;
} }
header:hover{ 20% {
margin-right: 5%;
margin-left: 5%; color: crimson;
width: 90%; }
} 40% {
p { font-family: Georgia, 'Times
New Roman', Times, serif;
font-size: 1.1em; color:darkolivegreen;
animation-duration: 3s; }
animation-name: slidein; 40% {
}
color:deeppink;
}
100% {
color: darkgray;
}
}
