Односторонний эффект перехода в CSS3: 'smooth down' без JS

Быстрый ответ

Для реализации односторонних переходов в CSS необходимо применить свойство transition к изначальному состоянию элемента. Оно обеспечит плавное переключение состояний, в то время как возврат к первоначальному произойдет мгновенно:

.element {
  background-color: blue;
  transition: background-color 1s; /* Время постепенной смены. Требуется всего одна секунда. */
}

.element:hover {
  background-color: red; /* Без шуток, становлюсь красным, как только вы перестанете мной касаться. */
}

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

Применение псевдоклассов для односторонних переходов

Псевдоклассы :active или :focus отлично подойдут для создания односторонних переходов. Например, в случае с :active на кнопке, такой переход создаст эффект мгновенного "отскока":

.button {
  background-color: green;
  transition: background-color 0.5s ease-in; /* Мирно и постепенно становлюсь зеленым. */
}

.button:active {
  background-color: yellow; /* И моментально желтею при клике. */
}

Таким образом формируется заметный односторонний переход с немедленным возвращением к начальному цвету.

Плавные переходы

Применение временной функции ease-in делает односторонние переходы более плавными и придает им эффект плавного угасания:

input[type='text'] {
  border-color: black;
  transition: border-color 0.5s ease-in; /* С легкой драматичности меняю свой цвет. */
}

input[type='text']:focus {
  border-color: orange; /* Оранжевый привлекает внимание, но возвращаюсь к черному, когда фокус снимают. */
}

Совместимость — наше все

Будьте внимательны к совместимости переходов в различных браузерах. Использование вендорных префиксов, таких как -webkit- или -moz-, способствует достижению кроссбраузерности. Даже в эпоху современных браузеров не стоит забывать о поддержке более старых версий:

.button {
  background-color: green;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  transition: background-color 0.5s; /* Мечта о королевстве кроссбраузерности. */
}

Визуализация

Представьте односторонние переходы в CSS3 как дверь, работающую только в одном направлении:

Обычная дверь (🚪): Открывается ➡️ и закрывается ⬅️ с каждым взаимодействием.

Односторонний переход в CSS3:

Однонаправленная дверь (🚪🔒): Открывается ➡️ (срабатывает переход),
                               но не закрывается ⬅️ (обратный переход отсутствует).

🔄 Наведение курсора: Дверь открывается (активное состояние).
🚫 Курсор убран: Дверь остается такой, какой была (обратного перехода нет).

Обратная связь при переходах с нулевой продолжительностью

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

.submit-button {
  opacity: 1;
  transition: opacity 0s; /* Быстрыми как молния, начинаю и кончаю переход. */
}

.submit-button:active {
  opacity: 0.7; /* При нажатии становлюсь на 30% менее яркой. */
}

Переходы для специфичных свойств

Анимируйте только конкретные свойства, избегая использования all. Это ускоряет работу и предотвращает нежелательные эффекты на остальных свойствах:

.modal {
  transform: scale(0);
  transition: transform 0.3s; /* Молниеносная игра "Вижу, не вижу" с модальным окном. */
}

.modal:target {
  transform: scale(1); /* Вернулась к первоначальному размеру всего за 0.3 секунды! */
}

Отключение переходов при загрузке страницы

Иногда бывает нужно отключить переходы в момент загрузки страницы. Это можно сделать добавив класс через JavaScript после инициализации страницы, чтобы активировать переходы:

window.onload = () => {
  document.querySelector('.fade-in').classList.add('loaded'); /* Добавим немного драму для старта. */
};

.fade-in.loaded {
  opacity: 1;
  transition: opacity 0.5s;
}

Полезные материалы

1. transition | CSS-Tricks — Исчерпывающий справочник по CSS-переходам.
2. Using CSS transitions | MDN — Подробный учебник от MDN о использовании переходов в CSS.
3. :hover | MDN — Описание псевдокласса :hover для создания односторонних эффектах.
4. Taming Advanced CSS Selectors — Smashing Magazine — Обзор сложных селекторов CSS.
5. CSS Transitions | w3schools — Легкое для понимания описание свойств, синтаксиса и примеров переходов в CSS3.
6. Easing Functions Cheat Sheet — Интерактивная шпаргалка по функциям смягчения движений в CSS.