CSS. Не срабатывает св-во transition

Question

Есть разметка со стилями. При помощи скрипта к классу .anim добавляется .active, что должно делать .header__item видимым и это должно происходить плавно. Скрипт никак не касается стилей. Он просто добавляет и убирает класс. Проблема: свойство transition работает частично. Т.е. задержка, которую я устанавливаю, срабатывает, а длительность анимации не работает. Текст появляется резко и изменение значения длительности транзишена результатов не дает.

    .header__list {
        margin: 0 auto;
    }
    .header__item {
        text-align: center;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header__link {
        font-size: 20px;
        line-height: 127%;
    }

    .anim {
       opacity: 0;
       transition: .3s ease .5s;
    }
    
    .anim.active {
       opacity: 1;
    }

    <ul class="header__list">
                            <li class="header__item anim active"><a href="#" class="header__link">Текст</a></li>
                            <li class="header__item anim active"><a href="#" class="header__link">Текст</a></li>
                            <li class="header__item anim active"><a href="#" class="header__link">Текст</a></li>
                            <li class="header__item anim active"><a href="#" class="header__link">Текст</a></li>
                            <li class="header__item anim active"><a href="#" class="header__link">Текст</a></li>
                            <li class="header__item anim active"><a href="#" class="header__link">Текст</a></li>
                            <li class="header__item anim active"><a href="#" class="header__link">Текст</a></li>
                        </ul>

БЛОГ НА HUSL

CSS. Не срабатывает св-во transition

Ответы (0 шт):