1. Transition: Переходы
Основы Transition
`Transition` используется для создания плавных переходов между состояниями элемента при изменении CSS-свойств.Ключевые свойства
- `transition-property`: Какие свойства анимировать. - `transition-duration`: Длительность анимации. - `transition-timing-function`: Скорость изменения (например, `ease`, `linear`). - `transition-delay`: Задержка перед началом.Пример
```html ``` ```css .btn { background-color: blue; color: white; transition: background-color 0.3s ease; }.btn:hover { background-color: red; }
text
**Разбор:** При наведении на кнопку цвет меняется плавно за 0.3 секунды.
<h3 id="основные-вопросы">Основные вопросы</h3>
1. Как работает `transition-property`?
2. Чем отличается `ease-in` от `ease-out`?
---
<h2 id="2-animation-ключевые-кадры">2. Animation: Ключевые кадры</h2>
<h3 id="основы-animation">Основы Animation</h3>
`Animation` позволяет создавать более сложные эффекты с использованием ключевых кадров (`@keyframes`).
<h3 id="ключевые-свойства">Ключевые свойства</h3>
- `animation-name`: Имя анимации.
- `animation-duration`: Длительность анимации.
- `animation-iteration-count`: Количество повторений (или `infinite`).
- `animation-direction`: Направление (`normal`, `reverse`, `alternate`).
<h3 id="пример">Пример</h3>
```html
<div class="box"></div>
css
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
.box {
animation: move 2s infinite;
}
Разбор: Элемент двигается вправо и повторяет анимацию каждые 2 секунды.
Основные вопросы
1. Как остановить анимацию на последнем кадре? 2. Что делает `animation-fill-mode: forwards`?3. Управление через JavaScript
Основы управления
JavaScript позволяет динамически изменять стили, запускать и останавливать анимации.Пример с `transition`
```html ``` ```css #box { width: 100px; height: 100px; background-color: blue; transition: transform 0.5s; } ``` ```javascript const box = document.getElementById('box'); box.addEventListener('click', () => { box.style.transform = 'scale(1.5)'; }); ``` **Разбор:** При клике элемент увеличивается за 0.5 секунды.Пример с `animation`
```javascript const circle = document.getElementById('circle'); circle.style.animation = 'grow 1s forwards'; ``` **Разбор:** JS динамически добавляет анимацию к элементу.Основные вопросы
1. Как добавлять/удалять классы для управления анимацией? 2. Как использовать `requestAnimationFrame` вместо CSS-анимации?Итоговые вопросы для подготовки
1. Как работают `transition` и `animation` на уровне браузера? 2. В чем разница между `transition` и `animation`? 3. Как управлять анимациями в реальном времени с помощью JavaScript?Совет: Отработайте примеры самостоятельно, чтобы понять поведение анимаций в разных условиях.