Как сделать плавный переход в css
Перейти к содержимому

Как сделать плавный переход в css

  • автор:

transition

Свойство transition относится к новым свойствам CSS3.

Плавные переходы в CSS или «transitions» позволяют изменять значения свойств постепенно, «с нежностью». Обычно эффект от изменения значений CSS-свойств виден мгновенно, но с помощью плавных переходов можно изменить это поведение и сделать процесс изменения значений плавным и без использования JavaScript.

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

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active.

Существует четыре отдельных свойства.

transition-property Свойство, к которому применяем анимацию. Практически любое свойство CSS: color, background, width, font-size и т.д. transition-duration Длительность анимации. Время в секундах. transition-timing-function Временная функция, используемая для анимации: ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier transition-delay Задержка анимации. Время в секундах.

А также есть укороченная запись, вмещающая все свойства — transition.

 .элемент < переход: [свойство] [продолжительность] [легкость] [задержка] >.element

transition-duration

Чтобы обозначить плавный переход в CSS, достаточно задать одно свойство: transition-duration — длительность перехода. Значения задаются в секундах (10s, 3s), долях секунды (0.1s, 0.03s) или миллисекундах (100ms, 333ms).

Зададим разные цвета и размеры шрифта, а для анимации установим длительность в 3 секунды. Анимацию добавим в двух местах, чтобы она происходила как при наведении мыши на блок, так и при убирании мыши.

 .t1 < width: 100px; height: 50px; color: white; background-color: green; transition-duration: 3s; text-align: center; font-size: 16px; >.t1:hover

transition-property

Если задана только длительность перехода transition-duration, то по умолчанию плавное изменение затрагивает все свойства элемента и для всех свойств происходит одновременно. Такое поведение соответствует значению all свойства transition-property.

Такое поведение часто нежелательно, особенно когда в правиле много свойств. Можно указать, какие именно свойства нужно изменять плавно, перечислив их в transition-property через запятую:

 transition-property: width; // плавно меняется только ширина transition-property: width, height; // плавно меняются только ширина и высота 

При этом так же через запятую можно задавать переходам разных свойств разную длительность:

 transition-property: width, height; transition-duration: 1s, 5s; // ширина меняется за 1 секунду, высота за 5 

Если брать предыдущий пример, то возможно мы хотим применить анимацию только для фона, но не анимировать размер шрифта.

 .t2 < width: 100px; height: 50px; color: white; background-color: green; transition-duration: 3s; transition-property: background-color; text-align: center; font-size: 16px; >.t2:hover

transition-delay

Ещё одно свойство переходов — transition-delay определяет задержку перед началом перехода и задаётся в секундах или миллисекундах.

Можно указывать и отрицательные значения. Задержка применима к отдельным элементам, в этом случае значения указываются через запятую в том же порядке, как у transition-property. Также можно добиться интересного результата, если указать много свойств у transition-property и два значения у transition-delay. В этом случае к нечётным свойствам будет применяться первое значение, а к чётным — второе.

Создадим анимацию, которая будет работать через полсекунды после наведения мышки.

 .t3 < width: 100px; height: 50px; color: white; background-color: green; padding: 5px 10px; color: white; transition-duration: 1s; transition-delay: 0.5s; >.t3:hover

transition-timing-function

Свойство transition-timing-function определяет с какой скоростью и ускорением будут меняться свойства во время перехода. Содержит несколько значений.

  • ease — переход начинается медленно, затем ускоряется и к концу движения опять замедляется
  • linear — переход равномерный, без ускорений и замедлений
  • ease-in
  • ease-out
  • ease-in-out

Названия linear, ease и другие — это «псевдонимы» функций кубических кривых Безье:

  • cubic-bezier(0, 0, 1, 1) — это linear
  • cubic-bezier(0.42, 0, 1, 1) — это ease

В общем представлении cubic-bezier(x1, y1, x2, y2) значения x и y — это координаты точек кривых на графике. При этом верным считается значение x только в диапазоне от 0 до 1.

Сервис http://cubic-bezier.com/#.17,.67,.83,.67 поможет разобраться в функциональном представлении кривых Безье.

На странице http://easings.net/ru можно найти целую коллекцию разных easing-функций на основе кривых Безье.

C помощью функции cubic-bezier мы можем задавать любые формы переходов.

Ещё один возможный класс значений transition-timing-function — это steps, позволяющий задать «ступеньки», по которым будет идти переход.

 transition-timing-function: steps(число_шагов, направление); 

Число_шагов — это целое число, за которое будет выполнен переход; направление может принимать значение start или end. При заданном start первый шаг выполняется одновременно с началом перехода, а в случае c end последний шаг будет выполнен вместе с завершением перехода.

Пример применения steps — анимация спрайта.

Дополнительные материалы

Слайдер при помощи свойства CSS3 transition, где при помощи CSS и без всякого JavaScript удалось создать симпатичный слайдер.

Плавный переход в CSS — transition на примерах

Плавный переход в CSS - transition на примерах

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

Добиться эффекта плавного перехода можно с помощью CSS свойства – transition, где
all – эффект замедления применяется ко всем возможным переходам
1s – время выполнения плавного перехода
ease – способ выполнения плавного перехода

transition: all 1s ease;

Анимация кнопки при наведении

Демонстрация работы анимации кнопки, верхий рисунок: демо

Плавный переход в CSS – transition на примерах

Свойство transition следует прописать к элементу, в нашем случае это кнопка button, а не к его состоянию, то есть псевдоэлементу hover. Тогда плавный переход будет работать не только при наведении, но и при снятии курсора с элемента.

Плавный переход transition CSS. Кнопка

Заказать работу

.button background-color: #2bc6a4;
border: none;
border-radius: 15px;
color: #fff;
display: block;
padding: 10px 20px;
text-align: center;
text-transform: uppercase;
width: 20%;
margin: auto;
font-family: sans-serif;
font-size: 22px;
text-decoration: none;
transition: all 1s ease;
>

.button:hover background-color: #4feac8;
>

Анимация фона при наведении при участии transition

Демонстрация работы анимации кнопки, нижний рисунок: демо

Плавный переход в CSS – transition на примерах

Создадим круг, при наведении на который будет плавно меняется его цвет. Для этого создадим тег div с классом circle, внутри которого пропишем тег span с текстом.

Плавный переход transition CSS. Круг

Иконка

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

В CSS коде оформим внешний вид первого круга, в обычном состоянии и он будет черного цвета.

.circle background: #3d3d3d;
width: 198px;
height: 198px;
margin: 0 auto;
line-height: 200px;
color: #fff;
font-size: 1.8em;
border-radius: 50%;
position: relative;
cursor: pointer;
text-align: center;
>

Для текста ставим z-index: 2, таким образом текст будет на самом верхнем слое.

.circle span position: relative;
z-index: 2;
>

Для построения второго, зеленого круга, мы воспользуемся псевдоэлементом after – это то, что идет после блока. Обязательно прописываем пустую строчку content: » «; иначе псевдоэлемент не отобразится. Зададим ширину и высоту точно такую же, как и у первого круга и желаемый цвет при наведении.

Плавный переход в CSS – transition на примерах

Прописываем display: block, чтобы наш псевдо-круг вообще появился. Итак, псевдо-круг расположился ниже под первым кругом. С помощью свойств position, мы совмещаем оба круга, друг под другом, а свойство z-index: 1, слой с псевдо-кругом размещает под текстом.

.circle::after content: » «;
width: 202px;
height: 202px;
background: #2bc6a4;
position: absolute;
display: block;
border-radius: 50%;
top: -1px;
left: -1px;
box-shadow: 0 0 0 0 #3d3d3d inset;
transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;
>

Теперь необходимо сделать, чтобы при наведении зеленый круг пропадал, а вместо него появлялся черный. Поэтому мы будем делать следующее, при наведении на класс circle, псевдоэлемент after будет постепенно исчезать. Работа transition показана в строчке кода ниже.

transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;

и исчезнет совсем

width: 0;
height: 0;
font-size: 0;

исчезает красиво, по-центру

top: 100px;
left: 100px;

box-shadow растушёвывает края зеленого круга

.circle:hover::after width: 0;
height: 0;
font-size: 0;
top: 100px;
left: 100px;
box-shadow: 0 0 20px 20px #3d3d3d inset;
>

Итоги

На самом деле свойство transition очень простое, успешность его применения зависит только от ваших знаний CSS в целом.

Вы можете узнать больше, просмотрев этот видеокурс «Вёрстка сайта с нуля»

Создано 25.04.2018 09:55:00

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Плавное изменение свойств в CSS — transition

    Свойство transition позволяет задать плавный переход элементам от одного состояния к другому при смене CSS свойств. Для задания параметров перехода можно использовать отдельные свойства transition для каждого значения или краткую запись transition. Пример двух вариантов с аналогичными значениями: https://codepen.io/Yury_P/pen/jOMLrxN

    Свойства transition:

    transition-property — название свойства. Для выбора всех свойств нужно указать ключевое слово all.

    transition-duration — длительность перехода. Указывается в секундах (s) или милисекундах (ms).

    transition-timing-function — функция перехода. Указывает как будет происходить переход. По умолчанию переход имеет значение ease, то есть переход стартует медленно в середине ускоряется и в конце замедляется. Значение указывается ключевым словом:

    linear — равномерно

    ease — медленно — быстро — медленно

    ease-in — медленно — быстро

    ease-out — быстро — медленно

    ease-in-out — аналогично ease, но более равномерно

    Если нужна более тонкая настройка функции перехода, можно указать функцию cubic-bezier:

    cubic-bezier(x1, y1, x2, y2) — данная функция позволяет задавать свои значения для функции перехода. В функции нужно задать значение x и y для двух промежуточных точек. Точки (x0, y0) и (x3, y3) определены заранее, изменить их нельзя, их значение равны: x0, y0 = 0;0, x3, y3 = 1;1. Настроить свою функцию cubic-bezier и визуально посмотреть как она работает можно по ссылке: https://cubic-bezier.com/

    Также переход можно разбить на шаги используя функцию steps:

    steps(n) — разбивает переход на количество шагов n (n — целое положительное число). Опционально вторым аргументом можно указать ключевое слово, однако не все браузеры имеют хорошую поддержку ключевых слов функции steps:

    start — анимация в начале каждого шага

    end — анимация в конце каждого шага (значение по умолчанию)

    jump-start — аналогично start

    jump-end — аналогично end

    jump-both — включает паузу в начале (0%) и в конце (100%) перехода (добавляет один шаг)

    jump-none — включает паузу в начале (0%) и в конце (100%) перехода на время 1 / n (удаляет один шаг)

    Для некоторых значений функции steps есть отдельные ключевые слова:

    step-start — аналогично steps(1, jump-start)

    step-end — аналогично steps(1, jump-end)

    transition-delay — задержка перед началом перехода. Указывается в секундах (s) или милисекундах (ms)

    Сокращенная запись transition

    transition: transition-property transition-duration transition-timing-function transition-delay;

    Для перехода обязательно нужно указать transition-duration, остальные значения можно не указывать.

    Чтобы применить разные переходы для разных свойств, значения для каждого перехода нужно указывать через запятую.

    Следует помнить, что только к части свойств можно применить свойство transition. Полный список таких свойств можно посмотреть на сайте: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

    Также transition не работает если изменять значение свойства на ключевое слово auto или если у свойства уже указано значение auto.

    Обсуждение ( 0 )

    Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

    Свойство transition-property

    Переход для нескольких свойств, перечисляются через запятую.

     .example-3 < width: 100px; height: 100px; background: #fd4d66; transition: 0.2s linear, 0.2s linear; transition-property: opacity, background; >.example-3:hover 

    Наведи на меня
    transition-property: all;

    Задает плавный переход для всех свойств, значения которых изменяются

     .example-4 < width: 100px; height: 100px; background: #fd4d66; transition: 0.2s linear, 0.4s linear; transition-property: all; >.example-4:hover 

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *