J'ai un div avec position relative et gauche, haut et box-shadow définis. Lorsque j'écris une instruction div: hover, j'essaie de faire la transition de chacun de ces attributs. Il fonctionne avec des attributs individuels, mais pas avec 2 ou plus. Est-ce censé arriver et / ou comment puis-je le réparer de telle sorte que plusieurs transitions puissent se produire.
J'ai résolu le problème du haut et du gauche qui n'était pas défini avant le survol, mais cela ne résout toujours pas le problème lorsqu'il y a plusieurs transitions à la fois.
.faq-card {
border-radius: 10px;
border: 1px solid white;
box-shadow: 10px 10px 10px rgba(216, 44, 44, .5);
height: 100px;
position: relative;
left: 0px;
top: 0px;
}
.faq-card:hover {
box-shadow: 0px 0px 10px rgba(216, 44, 44, .5);
left: 10px;
top: 10px;
transition: left 1000ms ease;
transition: top 1000ms ease;
transition: box-shadow 1000ms ease;
}
Je m'attends à ce que div se déplace de 10 pixels vers la droite, 10 pixels vers le bas et que l'ombre de la boîte se fane dans la division de manière plutôt que saccadée. Cependant, ils le font tous en même temps sans transition. Merci pour toute aide
1 réponse
Vous pouvez tout faire
transition: all 1000ms ease;
Il prendra effet sur tous les changements
De nouvelles questions
css
CSS (Cascading Style Sheets) est un langage de feuille de style de représentation utilisé pour décrire l'apparence et la mise en forme des documents HTML (HyperText Markup Language), XML (Extensible Markup Language) et des éléments SVG, y compris (mais sans s'y limiter) les couleurs, la mise en page, les polices, et animations. Il décrit également comment les éléments doivent être affichés à l'écran, sur papier, dans un discours ou sur d'autres supports.