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

Как сделать плавную анимацию css

  • автор:

Переходы с помощью :hover

При использовании псевдокласса :hover изменение стиля, к примеру, цвета фона, происходит мгновенно. Для плавной смены свойств предназначены переходы, которые делаются с помощью свойства transition — оно позволяет задать продолжительность и метод перехода.

Для начала рассмотрим простой пример, когда плавно меняется цвет ссылок при наведении на них курсора.

a < color: green; transition: 1s; >a:hover

Сперва задаём исходный цвет ссылок с помощью свойства color , добавляя его к селектору A . Там же вставляем свойство transition со значением времени перехода, в частности, 1s — это одна секунда. Ниже создаём стилевые правила с псевдоклассом :hover , которые будут применяться к ссылкам при наведении на них курсора мыши. Теперь смена цвета ссылок с красного на зелёный, и наоборот, будет происходить плавно в течение одной секунды. Чтобы задать время перехода, просто поменяйте значение transition (пример 1). Можно вставлять дробные числа (0.8s) или миллисекунды (800ms), помня, что в одной секунде тысяча миллисекунд (1s = 1000ms).

Пример 1. Плавное изменение цвета ссылок

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета ссылки при наведении

Переходы можно добавлять не только к текстовым ссылкам, но и к другим элементам веб-страницы. В сочетании со свойством transform, задающим трансформацию, это позволяет делать разные эффекты. В примере 2 показан блок с картинкой внутри, при наведении на которую картинка увеличивается в масштабе. Для этого в стилях для используем свойство overflow со значением hidden , чтобы картинка при увеличении не выходила за пределы блока. К img добавляем свойство transition , а для img:hover задаём свойство transform .

Пример 2. Масштабирование картинки при наведении

Белка

:hover

Результат данного примера показан на рис. 2.

Рис. 2. Увеличение картинки при наведении

Здесь применяется строчно-блочный элемент, чтобы размеры соответствовали вставленной в него картинке. У изображений внутри блоков появляется небольшой отступ снизу, убираем его с помощью свойства display, добавляя его к селектору img .

См. также

  • :focus на мобильных устройствах
  • transform
  • transition
  • Анимация кнопок при наведении
  • Анимация ссылок при наведении
  • Виды ссылок
  • Всплывающая подсказка
  • Звёздные войны
  • Использование :hover
  • Множественные переходы
  • Несколько псевдоэлементов
  • Нормальное позиционирование
  • Ориентация
  • Переходы
  • Переходы в действии
  • Переходы и анимация
  • Повёрнутые рамки
  • Подсветка строк и колонок таблицы
  • Псевдокласс :hover
  • Псевдоклассы в CSS
  • Работа с типографикой
  • Селекторы CSS
  • Состояния кнопок
  • Сочетание с псевдоклассами
  • Типы ссылок
  • Трансформация
  • Трансформация
  • Трансформация в CSS
  • Функции трансформации

Плавная анимация движения на CSS

Плавная анимация движения на CSS

Как происходит анимация движения? Это когда анимируемый объект на сайте меняет свое горизонтальное и вертикальное положение в заданное время. Скорость анимации напрямую зависит от того, какое расстояние проходит объект за такое-то время. Чем меньше установленное время, тем быстрее движется объект и наоборот – увеличение отведенного времени, замедляет движение.

Анимацию движения легко можно создавать только на CSS, не прибегая к JS. Как минимум есть два варианта, какие свойства применять для анимации:

  1. top, bottom, left, right
  2. transform: translate

Для примера создадим фигуру и заставим её двигаться вниз и вправо.

// CSS
.square width: 200px;
height: 200px;
border-radius: 10px;
background-color: #d42929;
position: absolute;
top: 0;
left: 0;
z-index: 1;

animation: move 3s linear alternate infinite;
>

Разберем последнюю строку в коде:

  • move — название анимации, должно совпадать с @keyframes
  • 3s — длительность анимации
  • linear — линейное движение (по линии)
  • alternate — воспроизводит анимацию в обратном порядке
  • infinite — задает бесконечное повторение

Плавная анимация движения на CSS.

Пример анимации (вариант 1)

Как происходит анимация, когда мы используем top, bottom, right, left? Нам нужно сдвинуть фигуру на 200 пикселей вправо и вниз. Для этого пропишем для первого кадра исходные позиции элемента на странице. А для последнего кадра — положение элемента, где анимация должна закончиться.

Движение элемента между первым и последним кадром называется анимацией. Наш элемент будет сдвигаться на 1 пиксель в течении заданного времени. Браузер будет прорисовывать фигуру каждый раз заново на новой позиции, и так 200 раз туда и столько же обратно. Какие есть недостатки у этого способа анимации? Во первых нет плавности. Видно невооруженным глазом, как фигура дергается, словно спускается по ступенькам. Во вторых, это сильно нагружает браузер и на слабом компьютере анимация будет двигаться рывками.

Пример анимации (вариант 2)

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

@keyframes move 0% transform: translate3d(0, 0, 0);
>
100% transform: translate3d(200px, 200px, 0);
>
>

Итоги

Правильная CSS анимация движения должна создаваться при помощи трансформации (transform: translate). Так мы получим плавное движение объекта и не ухудшим скорость работы сайта.

Создано 04.03.2020 10:59:15

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

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

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

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

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

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

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

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

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

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

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

    Когда пользователь наводит курсор на объект или нажимает на него, псевдокласс hover срабатывает мгновенно. Чтобы как-то сгладить переход, необходимо использовать анимацию. Приведем простой пример ссылки:

    .link padding: 10px 20px; 
    background: #F1F1F1;
    color: #000;
    >

    .link:hover background: #AAAAAA;
    >

    Теперь сгладим переход цвета фона при наведении курсора на ссылку. Для этого будем использовать три свойства: transition-property , transition-duration и transition-timing-function . Первое указывает на свойство, к которому мы применяем переход. Второе указывает продолжительность перехода. Третье указывает скорость перехода, в зависимости от времени.

    .link:hover background: #AAAAAA; 
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: ease;
    >

    В нашем примере устанавливается переход для свойства background , длительностью 1s и с временной функцией ease . Если необходимо установить плавный переход для всех свойств, то замените конкретное свойство на all , то есть таким образом: transition-property: all .

    Теперь рассмотрим значения, которые может принимать свойство transition-timing-function . Достаточно тяжело описать работу каждого значения, поэтому просто их перечислю: ease , linear , ease-in , ease-out , ease-in-out и cubicbezier . Чтобы понять, чем они отличаются, попробуйте каждый по очереди. Для упрощения кода эти три строчки можно записать одной. Далее равнозначный пример:

    .link:hover background: #AAAAAA;
    transition: background 1s ease;
    >

    Приведенные ранее примеры небыли кроссплатформенными. Чтобы свойство transition корректно работало во всех браузерах, необходимо добавлять специальные приставки (вендорные префиксы). Вот основные:

    1. -webkit- для Chrome, Safari и всех браузеров, написанных на движке WebKit;
    2. -o- для Opera;
    3. -moz- для Firefox;
    4. -ms- для браузеров Microsoft.

    Используются они следующим способом:

    -webkit-transition: background 1s ease;
    -o-transition: background 1s ease;
    -moz-transition: background 1s ease;
    -ms-transition: background 1s ease;

    Кстати, в свойстве transition можно перечислять значения через запятую, например, вот так:

    transition: background 1s ease, color 2s linear; 

    Возможно, кто-то задается вопросом, почему бы не использовать JavaScript? Использовать его можно, но зачем усложнять себе жизнь, когда имеется возможность решить задачу средствами CSS.

    Плавная анимация для подложки бокового меню

    Всех приветствую. Реализовываю боковое меню вот из этого примера: https://blog-kopilka.ru/demo_html/bootstrap4-sidebar/index.php Не получается решить вопрос со скоростью появления/исчезновения полупрозрачной подложки, когда открывается/закрывается боковое меню. В примере код, отвечающий за подложку, выглядит так:

    .overlay < display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 998; opacity: 0; transition: all 0.5s ease-in-out; >.overlay.active

    Я понимаю, что свойство, отвечающее за скорость анимации является transition. Однако, как бы я не менял время данного свойства, появление/исчезновение подложки анимируется мгновенно. Выглядит это очень резко. Буду признателен за пояснение причин, из-за которых свойство transition не работает у данного элемента. А также за рекомендации, как можно реализовать поставленную задачу и сделать появление/исчезновение подложки плавным. Заранее благодарю за помощь.

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

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