CSS3-переход: эффект затухания

При попытке реализовать эффект затухания с использованием чистого CSS может возникнуть недоумение, почему анимация слайда не сработает. И вот почему:

Ключ к эффекту затухания заключается в изменении свойства непрозрачности. Свойство top, которое используется для анимации слайдов, не даст желаемого эффекта.

Эффект плавного исчезновения с использованием перехода CSS3

Вот пример того, как добиться эффект затухания с использованием переходов CSS3:

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}

Когда этот класс применяется к элементу, он постепенно исчезает в течение 2 секунд.

Дополнительные ресурсы:

• [Переход CSS3: постепенное исчезновение и постепенное исчезновение, например эффекты](https://css-tricks.com/css3-transition-fadein-fadeout/)

Понимание различий:

Ключевое отличие Между плавным затуханием и анимацией слайда лежит переходное свойство. Для эффекта затухания это свойство непрозрачности, а для анимации слайда это обычно свойство позиции, например top или left.

В случае предоставленного кода анимация настроена на преобразование свойства top. , что переместит элемент за пределы экрана, а не затухнет.