Ainsi, vous pourrez donner un effet d'opacité, décalage, un fondu etc à un bouton par exemple lors du survol de la souris. On parle de transition css hover.
Pour créer un site avec des belles transitions CSS, il faut prendre en compte 4 propriétés css qui permettront d'obtenir un effet vraiment sympa sur un élément ciblé.
Voir les exemples Accéder au code source
C'est grâce à ces 4 éléments compilés que l'on va pouvoir effectuer une belle transition en css 3 !
Voyons maintenant comment mettre tout cela en musique !
L'objectif est de modifier la dimension et la couleur de l'objet lors du survol de la souris. On appliquera un délai ou retard de 1 seconde. La durée de cette transition durera 2 secondes. Nous allons donc exploiter toutes les propriétés des transitions CSS. Un jeu d'enfant !
<div class="element transition-width"></div>
.element {
width: 110px;
height: 110px;
display: inline-block;
background: #CCC;
margin: auto 20px;
cursor: pointer;
}
.transition-width {
/* Syntaxe standard */
transition-property: width, background;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
/* Hack Safari */
-webkit-transition-property: width, background;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
}
.transition-width:hover {
width: 80%;
background: #008ed6;
}
.transition-width {
transition: width,background, 2s linear 1s;
-webkit-transition: width,background, 2s linear 1s;
}
Ne passez pas à côté des transitions css. Elles apportent de la dynamique et du sang neuf à votre site internet. Faciles à mettre en place, ces transitions ont l'énorme avantage de fonctionner sans l'appel d'un fichier javascript.
À noter que certaines versions de navigateurs ne tolèrent pas ces propiétés css. Cependant, cela n'impacte en rien le bon fonctionnement de votre site !
L'éditeur de site Internet fusionne avec un acteur majeur du marketing en ligne pour vous proposer dans quelques mois une Suite Marketing...
Des infos, des actus, mais aussi des leads ! Créer un site internet, c'est bien, mais il faut ensuite relancer, fidéliser,...
Les associations, au même titre que les entreprises, ont besoin de créer un site internet. C'est le moyen de se faire connaître mais aussi de...
L'année commence bien ! Pas de répit pendant la période de Noël pour notre équipe de développeurs. Tous les sites Digitaleo sont désormais optimisés...
Merci Anaïs. C'est une excellente remarque, et sachez que cette fonctionnalité sera intégrée dans une prochaine mise à jour de l'éditeur !
Anaïs le 8 décembre 2014 à 21:48
Bonjour,
Je vous remercie pour ce post.
Je pense que cela manque à Myebox par contre, pour les images par exemple.
( parfois on en voit qui arrive de la gauche vers droite et cela rajoute de la dynamique au site).
Merci en tt cas et top Myebox, vraiment !