web-dev-qa-db-fra.com

Retarder le survol / le survol avec les transitions CSS3

J'ai une boîte qui change de taille lors du survol. Cependant, je voudrais retarder l'étape de sortie de la souris, afin que la boîte conserve la nouvelle taille pendant quelques secondes, avant de récupérer l'ancienne taille.

div {
    width: 70px;
    -webkit-transition: .5s all;    
}

div:hover {
    width:130px;
}

Est-ce possible de faire SANS Javascript et seulement CSS3? Je n'ai qu'à me soucier de soutenir webkit.

csswebkitcss-transitions
17
patad
div {
    width: 70px;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    width:130px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

Cela déclenchera immédiatement le survol de la souris, mais attendez 5 secondes jusqu'à ce que la sortie de la souris soit déclenchée.

Violon

39
patad

la transition peut être déclarée comme

transition: .5s all 5s

(sténographie, le premier nombre est la durée, le deuxième nombre est le retard) alors vous n'avez pas besoin du délai de transition séparé

désolé, je ne peux pas ajouter de commentaire car je n'ai pas assez de points

6
Jenny