La transition ne fonctionne pas avec plusieurs attributs

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