CSS transition hors erreur

et désolé pour mon horrible anglais. J'ai un problème avec CSS et transition.CSS transition hors erreur

Je dois faire un div 100px x 100px, c'est juste un exemple bien sûr.

Lorsque je place le curseur sur le plan, il devrait être de 500px x 500px.

Et ici, tout va bien et fonctionne. La chose est, quand je supprime le curseur, j'ai besoin que le div revienne à 100x100px, mais il n'aura pas de transition, il disparaîtra juste et retourner 100x100px. Comment puis-je résoudre ce problème?

Voici le code que j'utilise.

<html> 
<head> 
    <style> 
    div.resize { 
     width: 100px; 
     height: 100px; 
     background: rgb(80,80,80); 
     } 
     div.resize:hover { 
     width: 500px; 
     height: 500px; 
     transition-duration: 1s; 
     } 
    </style> 
</head> 
    <body> 
    <div class="resize"></div> 
    </body> 
</html>

Source

2017-04-02 Anonymous

Actuellement, vous dites qu'il ne peut y avoir qu'une animation en vol stationnaire. Vous voulez que l'animation s'inverse une fois que vous avez quitté l'élément (vous ne survolez plus), mais cela n'est pas autorisé, car la div sans hover n'a pas d'animation définie.

Il suffit de mettre le transition-duration: 1s sur 'div.resize' au lieu de 'div.resize: hover' et il est corrigé.

Source

2017-04-02 19:08:27 JoostS

J'ai déjà essayé de mettre la transition sur div.resize, mais il ne fonctionnera pas. –

Voici un exemple, vous voulez la propriété de transition-durée seulement sur le div.resize, pas le sélecteur hover http://codepen.io/adamhari25/pen/dvaKGV –

C'est parti. Il suffit de déplacer la transition vers le conteneur plutôt que le :hover. J'ai également inclus les préfixes pour les autres navigateurs. Si vous voulez voir comment vous pouvez modifier les transitions, consultez W3 Schools.

div.resize { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: rgb(80, 80, 80); 
 

 
    -webkit-transition: all 1s ease; /* Safari and Chrome */ 
 
    -moz-transition: all 1s ease; /* Firefox */ 
 
    -o-transition: all 1s ease; /* IE 9 */ 
 
    -ms-transition: all 1s ease; /* Opera */ 
 
    transition: all 1s ease; 
 

 
} 
 

 
div.resize:hover { 
 
    width: 500px; 
 
    height: 500px; 
 
}

<body> 
 
    <div class="resize"> 
 
    </div> 
 
</body>

Source

2017-04-02 19:36:29 blackandorangecat

Merci maintenant tout fonctionne bien! –

@Pietro Si vous voulez rendre les choses plus fantaisistes ... http://jsfiddle.net/27Syr/1206/ – blackandorangecat

CSS transition hors erreur

Répondre

Questions connexes