Переход не работает с несколькими атрибутами

Question

У меня есть div с относительным положением и определенными слева, сверху и тенью. Когда я пишу оператор div: hover, я пытаюсь перевести каждый из этих атрибутов. Он работает с отдельными атрибутами, но не с 2 или более. Это должно произойти и / или как я могу исправить это так, что могут произойти множественные переходы.

Я решил проблему top и остался не определенным до наведения, но это все еще не решает проблему, когдаЕсть несколько переходов одновременно.

.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;
}

Я ожидаю, что div переместится на 10px вправо, на 10px вниз, и тень от блока будет переходить в div в виде перехода, а не рывками. Тем не менее, все они делают это сразу, без перехода. Спасибо за любую помощь

Answer 1

Это потому, что каждое свойство transition имеет приоритет над предыдущими.

Если вам нужно перевести несколько свойств, вы можете либоиспользуйте all (что может привести к непредвиденным переходам, которые вы не намеревались) или разделенные запятыми значения, которые нужно изменить

Поэтому вместо:

            transition: left 1000ms ease;
            transition: top 1000ms ease;
            transition: box-shadow 1000ms ease;

используйте

            transition: left 1000ms ease, top 1000ms ease, box-shadow 1000ms ease;

Обратите внимание, что таким образом вы можете иметь разное время и функции замедления для свойства EACH в одном выражении.

Answer 2

Вы можете сделать это все

transition: all 1000ms ease;

Это повлияет на все изменения