Css : les déclarations ↓↑/* Transitions sur du texte */ ul {} ul.xmp1 li { font:15pt times;} ul.xmp1 li span { text-shadow: 2px -1px 1px #555; margin-right:9px;letter-spacing:2px; } /* Paramètres de la transition */ ul.xmp1 li span { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; /* Propriétés concernées */ transition-property:color,background-color,font-size, margin, letter-spacing; transition-duration: 1s, 1s, 0.5s, 2s, 0.5s; transition-delay: 0s, 1s color: blue; } /* Déclenchement */ ul.xmp1 li span:hover { color: green; background-color:#FFF; letter-spacing:3px; /* font-size:1.2em; */ margin-left:9px; margin-right:0px; } |
Html le code ↓↑ <ul class="xmp1"> <li><span>Créer un effet</span> au survol de la souris </li><li><span>d’ouverture et de fermeture</span> </li><li><span>test</span> : www.quirksmode.org/css/transitions.html </li><li><span>ou</span> : letrainde13h37.fr/17/transitions-et-animations-css/ </li></ul> |
Css paramètres d'animation ↓↑ /* Animation "pourtour" */ @-webkit-keyframes pourtour { 0% { -webkit-box-shadow: 0 0 9px rgba(240, 140, 66, 0.5); border-color: rgba(255,0,0,0.5); } 100%{-webkit-box-shadow:0 0 9px rgba(240,140,66,1),0 0 17px rgba(255,140,0,1); border-color: rgba(255,0,0,1.0); } } @-moz-keyframes pourtour { 0% { -moz-box-shadow: 0 0 9px rgba(240, 140, 66, 0.5); border-color: rgba(255,0,0,0.5); } 100%{-moz-box-shadow:0 0 9px rgba(240,140,66,1),0 0 17px rgba(255,140,0,1); border-color: rgba(255,0,0,1.0);} } @-o-keyframes pourtour { 0% { box-shadow: 0 0 9px rgba(240, 140, 66, 0.5); border-color: rgba(255,0,0,0.5); } 100% { box-shadow:0 0 9px rgba(240,140,66,1),0 0 17px rgba(255,140,0,1); border-color: rgba(255,0,0,1.0); } } @keyframes pourtour { 0% { box-shadow: 0 0 9px rgba(240, 140,66, 0.5); border-color: rgba(255,0,0,0.5); } 100% { box-shadow:0 0 9px rgba(240,140,66,1),0 0 17px rgba(255,140,0,1); border-color: rgba(255,0,0,1.0); } } Css déclarations statiques et déclenchement ↓↑ /* Apparence « statique » */ a.animBtn, span.animBtn, button.animBtn { padding:0 7px; height: 1.4em; border: 1px solid #ccc; border-color: rgba(255,0,0,0.5); font-size:1.0em; text-align: center; color: #444; -webkit-border-radius: 1.2em; -moz-border-radius: 1.2em; border-radius: 1.2em; -webkit-box-shadow: 0 0 4px rgba(240, 140, 66, 0.5); box-shadow: 0 0 4px rgba(240, 140, 66, 0.5); } /* Déclenchement de l'animation */ a.animBtn:hover, span.animBtn:hover, button.animBtn:hover { cursor:pointer; background-color:#FDB; -webkit-animation-name: pourtour; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-name: pourtour; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -moz-animation-delay: 0s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -o-animation-name: pourtour; -o-animation-duration: 1s; -o-animation-timing-function: ease-in-out; -o-animation-delay: 0s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; animation-name: pourtour; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; } |
Html le code ↓↑ <div style="background:white;"> <br> Nous voyons ci-après comment est définie l'animation de couleur que l'on voit sur les boutons. <br> Ici un bouton <button class="animBtn" title="la souris survole"> balise button</button> une balise a <a class="animBtn" title="la souris survole"> lien avec balise a</a> et une balise span <span class="animBtn" title="la souris survole"> balise span</span> <br> <br> </div> |
Css paramètres d'animation ↓↑ /* définition animation "glow" */ @-webkit-keyframes glow { 0% { -webkit-box-shadow: 0 0 16px rgba(66,140,240,0.5); border-color: rgba(0,0,255,0.5); } 100% { -webkit-box-shadow: 0 0 16px rgba(66,140,240,1.0),0 0 36px rgba(0,140,255,1.0); border-color: rgba(0,0,255,1.0); } } @-moz-keyframes glow { 0% { -moz-box-shadow: 0 0 16px rgba(66,140,240,0.5); border-color: rgba(0,0,255,0.5); } 100% { -moz-box-shadow: 0 0 16px rgba(66,140,240,1.0),0 0 36px rgba(0,140,255,1.0); border-color: rgba(0,0,255,1.0); } } @-o-keyframes glow { 0% { box-shadow: 0 0 16px rgba(66,140,240,0.5); border-color: rgba(0,0,255,0.5); } 100% { box-shadow: 0 0 16px rgba(66,140,240,1.0),0 0 36px rgba(0,140,255,1.0); border-color: rgba(0,0,255,1.0); } } @keyframes glow { 0% { box-shadow: 0 0 16px rgba(66,140,240,0.5); border-color: rgba(0,0,255,0.5); } 100% { box-shadow: 0 0 16px rgba(66,140,240,1.0),0 0 36px rgba(0,140,255,1.0); border-color: rgba(0,0,255,1.0); } } |
Css : déclaration, déclenchement ↓↑ /* animationDemo2 : partie statique */ #animationDemo2 { width:255px; margin:10px auto; } #animationDemo2 button { width: 255px; height: 35px; background: #cde; border: 2px solid #ccc; border-color: rgba(0,0,255,0.5); font-size:18px; color: #000; text-shadow: rgba(20,20,20,0.5) 1px 1px 5px; text-align: center; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; -webkit-box-shadow: 0 0 16px rgba(66,140,240,0.5); box-shadow: 0 0 16px rgba(66,140,240,0.5); } /* animationDemo2 : déclenchement */ #animationDemo2 button:hover { background-color:#cce; -webkit-animation-name: glow; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: glow; -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-timing-function: ease-in-out; -o-animation-name: glow; -o-animation-duration: 1s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-timing-function: ease-in-out; animation-name: glow; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } |
Html : le code ↓↑ <div id="animationDemo2"> <button>bouton original</button> </div> |
Css pour la création code ↓↑ /* Boite englobante */ div.boites { float:left; margin-left:20px; background-color:#EDF; } div.textePr , div.texteSec { width:342px; height: 192px;} /* Boîte toujours visible */ div.textePr { position:relative; border:solid 4px #FA0; box-shadow: 0px 0px 8px #000; color: black; padding:9px; } /* Boîte non visible */ div.texteSec { position:absolute; left:-4px; top:-4px; border-top:solid 4px #0AF; border-right:solid 4px #0AF; border-left:solid 4px #0AF; color: grey; font-size:1.2em; padding:9px; opacity:0; } |
Html de la création code ↓↑
<div class="boites">
<div class="textePr">
<h5 style="margin:0px">Explication</h5>
div.textePr { width:342px; height: 192px;}
div.texteSec{ width:342px; height: 192px;}
par une transition régulière
div.textePr {
position:relative; border:solid 4px #FA0;
... }
div.texteSec {
position:absolute; left:-2px; top:-2px;
... }
<div class="texteSec">
La boîte change d'une position
initiale à sa position finale
par une transition régulière
<a ...>transition et animation</a>
</div>
</div>
</div>
La boîte de classe "boites" contient une boîte de classe "textePr",
qui elle même contient une boîte de classe "texteSec".
|
Css les paramètres ↓↑ /* Paramètres de l'animation */ @-moz-keyframes animTexteSec { from { left: -4px; top:-4px; opacity:0.0; } 1% { left:342px; top:192px; opacity:0.9; } 25% { left: 77px; top: 44px; opacity:0.7; } to { left: -4px; top: -4px; } } @-webkit-keyframes animTexteSec { from { left: -4px; top: -4px; opacity:0.0; } 1% { left:342px; top:192px; opacity:0.9; } 25% { left: 77px; top: 44px; opacity:0.7; } to { left: -4px; top: -4px; } } @-ms-keyframes animTexteSec { from { left: -4px; top: -4px; opacity:0.0; } 1% { left:342px; top:192px; opacity:0.9; } 25% { left: 77px; top: 44px; opacity:0.7; } to { left: -4px; top: -4px; } } |
Css déclenchement ↓↑ /* Déclencher l'animation au passage de la souris sur la boîte principale */ div.textePr:hover div.texteSec { -moz-animation: animTexteSec 1s ease-out 1; -webkit-animation: animTexteSec 1s 1; -ms-animation: animTexteSec 1s 1; background-color:white; opacity:0.9; } |
paramètres de l'animation de droite code CSS ↓↑
/* Paramètres de l'animation de droite pour les navigateurs type "mozilla" */ @-moz-keyframes animTexteSec2 { from { left: -4px; top: -4px; opacity:0.0; } 1% { left:342px; top:192px; opacity:0.6; } 25% { left: 77px; top: 44px; opacity:0.7; } 50% { left:-32px; top:-16px; opacity:0.8; } to { left: -4px; top: -4px; opacity:0.9; } }
Css les déclarations ↓↑ /* Un cadre avec coins arrondis et ombrage */ .cadre { border:solid 5px #486; /* arrondir les coins */ -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; /* une ombre autour du cadre */ -webkit-box-shadow:0 0 7px black; -moz-box-shadow:0 0 7px black; box-shadow:0 0 7px black; } /* Transitions sur image */ div.zEcran { position:relative; left:35px; width:300px; height:180px; overflow:hidden; } div.zMouvante { background-color:#EDF; position:relative; left:00px; width:600px; } div.zMouvante img { position:relative; width:300px; height:180px; } div.zMouvante div.zInterne { position:absolute; left:300px; top:0px; width:300px; height:180px; background-color:#F80; background:-webkit-gradient(linear ,left,right,from(#B44),to(#F80)); background:-webkit-linear-gradient(left,#B44,#F80); background: -moz-linear-gradient(left,#B44,#F80); background: -ms-linear-gradient(left,#B44,#F80); background: -o-linear-gradient(left,#B44,#F80); background: linear-gradient(left,#B44,#F80); } div.zCachee { position:absolute; left:0px; top:0px; /* 290=300-2*5 ou 290px = 300px - 2*5px */ width:290px; height:180px; padding:5px 10px 0px 5px; overflow:hidden; color:white; opacity:0; } /* Paramètres des transitions */ div.zEcran div.zMouvante { /* sur la zone qui se déplace */ -webkit-transition:all 1.1s ease; -moz-transition:all 1.1s ease; -ms-transition:all 1.1s ease; -o-transition:all 1.1s ease; transition:all 1.1s ease; } div.zEcran div.zCachee { /* sur le texte caché */ -webkit-transition:all 1.5s ease 1.0s ; -moz-transition:all 1.5s ease 1.0s ; -ms-transition:all 1.5s ease 1.0s ; -o-transition:all 1.5s ease 1.0s ; transition:all 1.5s ease 1.0s ; } /* Déclenchement des transitions */ div.zEcran:hover div.zMouvante { left:-300px; } div.zEcran:hover div.zCachee { opacity:1; } |
Html le code ↓↑ <div class="zEcran cadre"> <div class="zMouvante"> <img src="../../u/genepi300x180.jpg"> <div class="zInterne"></div> </div> <div class="zCachee"> L'image s'efface par la gauche ; le fond arrive par la droite. <br />Puis le texte apparaît. </div> </div><!-- class="zEcran" --> |
Css les déclarations ↓↑ /* Transitions sur image */ div.zCadre { position: relative; width:300px; height:180px; overflow: hidden; margin: 0px 15px; border: solid 8px #ffffff; border-radius: 6px; box-shadow: 0px 0px 7px #000000; } div.zVisible img { opacity:1; } div.zCadre div.zMasquee { /* contenu caché */ width: 290px; height: 170px; padding: 5px; position: absolute; top: 0px; left: 0px; text-align: center; font: 11pt 'Comic Sans MS'; color:white; z-index: 10; } div.zCadre div.zMasquee h4 { margin:9px auto; font-size:1.2em; color:#510; } div.zCadre div.zFond { position: absolute; top: 0px; left: 0px; width: 300px; height: 180px; background-color:rgba(255,136,0,0.8); z-index: 5; opacity:0; } /* Paramètres des transitions */ div.zCadre div.zVisible img { transition: all 0.35s ease; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -o-transition: all 0.35s ease; } div.zCadre div.zMasquee, div.zCadre div.zFond { transition: all 0.45s ease 0.4s; -webkit-transition: all 0.45s ease 0.4s; -moz-transition: all 0.45s ease 0.4s; -o-transition: all 0.45s ease 0.4s; opacity:0; } div.zCadre div.zMasquee h4 { /* zone agrandie 4 fois */ transform: scale(4); -webkit-transform: scale(4); -moz-transform: scale(4); -o-transform: scale(4); -ms-transform: scale(4); transition: all 0.45s ease 0.4s; -webkit-transition: all 0.45s ease 0.4s; -moz-transition: all 0.45s ease 0.4s; -o-transition: all 0.45s ease 0.4s; } /* Déclenchement */ div.zCadre:hover div.zVisible img { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } /* rendre visible */ div.zCadre:hover div.zMasquee { opacity:1; } div.zCadre:hover div.zFond { opacity:1; } div.zCadre:hover div.zMasquee h4 { /* retour à la taille normale */ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); } |
Html le code ↓↑ <div class="zCadre"> <div class="zVisible"> <img src="../../u/genepi300x180.jpg"> <div class="zMasquee"> <h4>Que se passe-t-il ?</h4> Le titre rapetisse et<br> l'image tourne et s'estompe, sans toutefois disparaître totalement. <br>Puis le texte apparaît. </div> <div class="zFond"></div> </div> </div> |