CSS transition
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Назад Полный CSS Справочник Дальше ❯
Пример
Наведите курсор на элемент <div>, чтобы постепенно изменить ширину от 100px до 300px:
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
Подробнее примеры ниже.
Определение и использование
Свойство transition является сокращенным свойством для четырех свойств перехода:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
Примечание: Всегда указывайте свойство transition-duration, в противном случае длительность — 0, а переход не будет иметь эффекта.
| Значение по умолчанию: | all 0s ease 0s |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.transition=»all 2s» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера следуют -WebKit-, -МОЗ- или -o- укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
Синтаксис CSS
transition: property duration timing-function delay|initial|inherit;
Значения свойств
| Значение | Описание |
|---|---|
| transition-property | Задает имя свойства CSS, для которого используется эффект перехода |
| transition-duration | Указывает, сколько секунд или миллисекунд потребуется для выполнения эффекта перехода |
| transition-timing-function | Определяет кривую скорости эффекта перехода |
| transition-delay | Определяет, когда начнется эффект перехода |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Когда < входной тип = «Text» > получает фокус, постепенно измените ширину с 100px на 250пкс:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Похожие страницы
CSS Справочник: CSS Transitions
HTML DOM Справочник: transition Свойство
❮ Назад Полный CSS Справочник Дальше ❯
Популярное CSS
css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы
Copyright 2018-2020 HTML5CSS.
ru
Правила и Условия Политика конфиденциальности О нас Контакты
Свойство transition-timing-function — скорость изменения (ускорение) плавного перехода transition
Свойство transition-timing-function устанавливает скорость изменения (ускорение)
плавного перехода transition. Например,
сначала медленно, потом быстро, потом медленно
и т.д.
Синтаксис
селектор {
transition-timing-function: значение;
}Значения
| Значение | Описание |
|---|---|
ease | Сначала медленно, потом быстро, в конце опять медленно. |
ease-in | Начинается медленно и постепенно ускоряется. |
ease-out | Начинается быстро и постепенно останавливается. |
ease-in-out | Сначала медленно, потом быстро, в конце опять медленно. От ease отличается скоростью. |
linear | Всегда одна и та же скорость. |
step-start | Анимации нет, свойство сразу принимает окончательное значение. |
step-end | Анимации нет, свойство ждет время, заданное в |
steps | Значение свойства изменяется скачками. Применяется так: transition-timing-function: steps(число скачков, start | end). Разницу между start и end смотрите в примерах. |
| cubic-bezier(параметры) | Кривая Безье, которая может задавать произвольную анимацию. См. генератор кривых Безье. |
Значение по умолчанию: ease.
Сравнение различных значений
Наведите мышкой на представленные ниже блоки, чтобы увидеть работу всех видов временных функций:
Пример
Наведите мышкой на блок — он плавно изменит
свою ширину за 2 секунды.
Так как
установлено значение ease-in, то анимация
начнется медленно и будет постепенно ускорятся:
<div></div>#elem {
border: 1px solid black;
transition-timing-function: ease-in;
transition-duration: 2s;
transition-property: width;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Смотрите также
- свойство
transition-duration,
которое задает длительность плавного перехода - свойство
transition-property,
которое задает имя свойства для плавного перехода - свойство
transition-delay,
которое задает задержку перед плавным переходом - свойство
transition,
которое является сокращением для плавного перехода - свойство
animation,
с помощью которого можно сделать анимацию
переходов CSS | EASEOUT
В этом уроке мы рассмотрим, как анимировать компоненты с помощью переходов CSS!
Переход происходит, когда мы сообщаем значение свойства CSS об изменении в течение определенного периода времени.
Мы делаем это с помощью свойства перехода , которое является сокращением следующих свойств:
-
свойство перехода -
длительность перехода -
функция синхронизации перехода -
задержка перехода
.элемент {
свойство перехода: свойство;
длительность перехода: продолжительность;
функция синхронизации перехода: функция синхронизации;
переход-задержка: задержка;
}
Это эквивалентно:
.element {
переход: задержка функции времени продолжительности свойства;
}
Свойства перехода
свойство-перехода — это свойство, к которому вы хотите перейти.
transition-duration — продолжительность перехода. Значение указывается в секундах (например, 5 с за 5 секунд).
функция времени перехода как происходит переход. Мы рассмотрим это позже.
transition-delay — это то, как долго вы хотите ждать, прежде чем начать продолжительность.
Опять же, значение указывается в секундах (например, 5 с за 5 секунд).
Активация переходов
Вы можете активировать переход CSS с помощью псевдокласса, такого как :hover
:focus (когда пользователь вводит вкладку или щелкает элемент ввода) или :active (когда пользователь щелкает элемент).Давайте посмотрим на пример:
.button {
цвет фона: розовый;
переход: background-color 2s easy-out;
}
.кнопка:наведите {
цвет фона: желтый;
}
Что такое функция синхронизации перехода?
Функция времени перехода определяет, как происходит переход. Все переходы установлены на linear по умолчанию, что означает, что свойство изменяется равномерно во время перехода.
Например:
.элемент {
свойство перехода: преобразование;
продолжительность перехода: 1 с;
временная функция перехода: линейная;
}
То же, что:
.element { переход: трансформировать 1с линейно; }
element {
переход: трансформировать 1с линейно;
}
Есть ряд значений, которые мы можем использовать для нашей
-
легкость— переход имеет медленное начало, быструю середину, затем медленный конец -
линейный— переход имеет постоянную скорость от начала до конца -
easy-in— переход будет иметь медленный старт -
облегчение— переход будет иметь медленный конец -
easy-in-out— переход имеет медленное начало и конец -
cube-bezier(n,n,n,n)— настраиваемые значения перехода, которые мы указываем сами. Удобно использовать инструменты генератора, такие как https://cubic-bezier.com/.
Давайте посмотрим их все в действии:
Смена нескольких свойств
Мы можем сменить сразу несколько свойств, разделив их запятой.
.элемент {
переход: цвет 2s easy-out,
background-color 2s easy-out;
}
Какие свойства можно анимировать?
Много! Вот полный список: https://developer.
mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties.
Похожие сообщения:
- Преобразования CSS
- Анимация CSS
- Запросы функций
Немного обо мне..
Привет, я Тим! 👋
Я разработчик, технический писатель и автор. Если вы хотите увидеть все мои статьи, вы находитесь в правильном месте! Просмотрите категории блога, чтобы найти то, что вас интересует.
В настоящее время я работаю над своим Полным руководством по фрилансу. Плохая новость в том, что его пока нет в наличии! Но если это может вас заинтересовать, вы можете подписаться на уведомление, когда оно будет доступно 👍
Спасибо за внимание!
Переходы CSS — Бесплатный учебник для изучения HTML и CSS
Переходы CSS позволяют плавно переходить из одного состояния элемента в другое. Это работает так: отдельные свойства анимируются из начального в конечное состояние.
Вы можете определить:
-
свойство перехода: какие свойств анимировать -
длительность перехода: как долго длится анимация -
функция времени перехода: как рассчитываются промежуточных состояний -
задержка перехода: запустить анимацию через определенное время
Вы можете установить каждое свойство CSS отдельно или использовать сокращенную версию:
Имейте в виду, что переход — это особый вид анимация , где есть только начальное и конечное состояние .
Краткий пример
Переходы часто используются в состояниях наведения .
a{ фон: светло-серый; цвет: серый;}
фон a:hover{: желтый; красный цвет;}
a. with-transition{ переход: 1s;} 
with-transition{ переход: 1s;} Без перехода С переходом
Вместо того, чтобы правила CSS при наведении были мгновенными , как фон , так и цвета текста медленно анимируются.
длительность перехода
Длительность перехода — единственное свойство CSS, необходимое для создания перехода. Его можно установить либо в секунд 2 секунды , либо в миллисекунд 100 мс .
Если вы хотите, чтобы ваш переход длился полсекунды , вы можете написать либо 0,5 с , либо 500 мс . В зависимости от того, насколько быстрыми должны быть ваши переходы, один модуль может быть проще и/или быстрее для написания.
a{ фон: светло-серый; цвет: серый;}
фон a:hover{: желтый; цвет: зеленый;}
a.with-fast-transition{ продолжительность перехода: 0,5 с;}
a.with-slow-transition{ переход: 3s;} Без перехода Переход 0,5 с 3-секундный переход
свойство перехода
Можно анимировать только 1/3 свойств CSS.
У Mozilla есть полный список.
По умолчанию свойство transition-property имеет значение all , что просто означает, что будут анимированы все возможные свойства.
Вы можете анимировать только 1 или несколько свойств.
a{ фон: светло-серый; цвет: серый;}
фон a:hover{: желтый; граница: 5 пикселей сплошного синего цвета; цвет: зеленый;}
a.with-background-transition{ продолжительность перехода: 2 с; свойство перехода: фон;}
a.with-all-transition{ продолжительность перехода: 2 с;} Без перехода Только с фоновым переходом Со всеми переходами
Свойство border полностью анимируется и позволяет легко визуализировать медленный (2 секунды) переход.
функция синхронизации перехода
Функция синхронизации определяет, как значение каждого свойства вычисляется во время перехода .
По умолчанию переход облегченный : ускорение в начале и замедление в конце.
Вы можете гарантировать, что переход будет происходить с постоянной скоростью . Функции синхронизации могут ускорить переход и/или замедлить .
Самый простой способ визуализировать функции синхронизации — изменить свойства положения , например оставил .
дел {слева: 0; положение: родственник; переход: 1с;}
основной: наведите div {слева: 200px;}
.ease{transition-timing-function: easy;} /* Поведение по умолчанию */
.linear{функция времени перехода: линейная;} /* Постоянная скорость */
.ease-in {функция синхронизации перехода: easy-in;}
.ease-out {функция синхронизации перехода: easy-out;}
.ease-in-out{функция синхронизации-перехода: easy-out;} <основной>Легкость: медленное начало, быстрая середина, медленный конец
<дел>Линейный: постоянная скорость
<дел>Ease In: медленное начало, быстрый конец
<дел>Ease Out: быстрый старт, медленный конец
<дел>Ease In Out: как легкость, но с более выраженными кривыми ускорения/замедления
<дел>
ext : медленный старт, быстрый середина, медленный конец
Линейный : постоянная скорость
Легкость в : медленный старт, быстрый конец
Eash Out : быстрый запуск, медленный конец
Easy.