Что такое transition в CSS3?

Свойство transition в CSS используется для создания плавных переходов между состояниями элемента, когда его стиль меняется. Это делает интерфейс более интерактивным и улучшает пользовательский опыт, добавляя к веб-странице анимационные эффекты без использования JavaScript.

1. Позволяет задавать длительность и тайминг изменения стилей.
2. Работает с большинством CSS-свойств, включая цвет, размеры, позиционирование и прозрачность.
3. Используется совместно с псевдоклассами (например, :hover), чтобы реагировать на взаимодействие пользователя.

/* Базовый стиль */
button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Изменение стиля при наведении */
button:hover {
    background-color: #2ecc71;
    transform: scale(1.1);
}

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

Параметры свойства transition включают:

1. transition-property — определяет, какие свойства будут изменяться (например, color, transform).
2. transition-duration — задает длительность эффекта (в секундах или миллисекундах).
3. transition-timing-function — регулирует, как будет происходить переход (например, linear, ease, ease-in, ease-out).
4. transition-delay — добавляет задержку перед началом перехода.

Полное сокращенное написание:

/* transition: property duration timing-function delay; */
button {
    transition: all 0.5s ease-in-out 0.1s;
}

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