Keyframes css при наведении

CSS анимация @keyframes + 7 примеров

В первой строчке, после ключевого слова @keyframes идёт название анимации, scaling , к ней мы будем обращаться далее.

После объявления прописываются «шаги анимации» — кадры, в % от всей длительности анимации. Обратите внимание, что между 0% и 100% вы можете вставлять сколько угодно промежуточных значений, будь-то 30%, 75% или даже 94%.

Обращение к блоку ключевых кадров

 animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

Это сокращённая форма записи, описание каждого свойства ниже:

animation-name	Название анимации, к которой происходит обращение из @keyframes
animation-duration	Продолжительность или выполнение анимации. Может задаваться в секундах s или миллисекундах ms
animation-timing-function	Временная функция, динамика изменения свойства, подсматривать можно здесь http://htmlbook.ru/css/transition-timing-function
animation-delay	Время задержки анимации До начала.
animation-iteration-count	Количество повторов анимации (infinite — бесконечно, также можно задать простое число без единиц измерения)
animation-direction	Направление анимации, последовательно, в обратную стороно или «туда-обратно» (normal — анимация проигрывается от начала до конца и останавливается. alternate — проигрывается от начала до конца и в обратном направлении. alternate-reverse — проигрывается с конца до начала и обратно. reverse — анимация проигрывается с конца.
animation-play-state	Управление проигрыванием анимации (paused (пауза), running (запуск), . ). Можно применить на :hover или из функции JavaScript при необходимости
animation-fill-mode	Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации

 animation: animationname 3s linear 2s infinite reverse

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

Бесконечная анимация

 @keyframes moving  0%  transform: translate(0, 0); > 30%  transform: translate(50px, 0); > 60%  transform: translate(50px, 50px); > 100%  transform: translate(0, 50px); > > div  width: 50px; height: 50px; background-color: #3debff; animation: moving 2s infinite; >

В данном примере значение infinite задает проигрывание анимации от начала до конца, и затем в обратном направлении

Остановка анимации

 @keyframes turning  0%  border-radius: 0 0 0 0; transform: rotate(0deg); > 25%  border-radius: 50% 0 0 0; transform: rotate(-45deg); > 50%  border-radius: 50% 50% 0 0; transform: rotate(-90deg); > 75%  border-radius: 50% 50% 50% 0; transform: rotate(-135deg); > 100%  border-radius: 50% 50% 50% 50%; transform: rotate(-180deg); > > div  animation: turning 1s infinite alternate; > div:hover  animation-play-state: paused; >

Здесь проигрывание анимации прирывается как только пользователь навел мышь на элемент, это происходит за счет установки animation-play-state: paused;

Пошаговая анимация

@keyframes steps  10%  transform: translate(60px, 0); > 20%  transform: translate(120px, 60px); > 30%  transform: translate(180px, -60px); > 40%  transform: translate(240px, 0); > 50%  transform: translate(300px, 60px); > 60%  transform: translate(360px, -60px); > 70%  transform: translate(420px, -120px); > 80%  transform: translate(480px, 60px); > 90%  transform: translate(540px, 0); > > div  animation: steps 5s infinite step-end; >

Пошаговая анимация задается параметром animation-timing-function со значением step-end

Источник

Как сделать плавное появление блока CSS?

В этой статье хочу вам показать два, очень интересных приема работы с CSS3, которые дают возможность сделать плавное появление блока CSS свойствами. Используя данную возможность можно сделать достаточно много интересных вещей для своего сайта. Например, мы можем сделать плавное появление элемента при наведении на какой-либо элемент на странице, или показать элемент через определенный интервал времени не используя при этом никаких скриптов!

Навигация по статье:

Плавное появление блока CSS при наведении

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

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

Селектор .on-hover:hover+ .hidden-block означает, что при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. В данном случае мы делаем этот элемент видимым, то есть меняем прозрачность (opacity:1;).

Так как блок .hidden-block не находится внутри .on-hover, то я использую hover с +. В случае если у вас скрытый элемент находится внутри элемента, на который нужно навести указатель мышки, то вам нужно использовать вот такой селектор:
.on-hover:hover .hidden-block

Плавное появление блока CSS с задержкой по времени

Второй вариант реализации плавного появления блока с помощью CSS заключается в использовании правила @keyframes.

Подробно об использовании данного правила вы можете почитать в этой статье:
Создаём CSS-анимацию без плагинов

В случае если нам нужно показать элемент с некоторой задержкой, мы должны сделать следующее:

1. Создаем блок, который по умолчанию будет полностью прозрачным:

Источник

Через что делать анимацию при наведении курсора (hover): transition или @keyframes?

Второй вариант больше понравился, потому что анимация отделена от таких настроек вроде центрирования, цвета и цвета фона — думаю, так более логично.
Какой вариант более правильный? Почему? Также, во втором случае, есть проблема — когда убираю курсор, все без анимации возвращается назад, если кто знает ответ — подскажите, пожалуйста)

Кейфреймы нужны для цикличной , «односторонней» или сложной (множество шагов с множеством изменений разных свойств) анимации. Например shine эффект для кнопки, когда проносится полупрозрачный элемент под наклоном, создающий эффект сияния. Если делать транзишеном — после убирания мыши с элемента, сияющий блок поедет обратно. А с кейфреймом он при каждом наведении будет 1 раз проезжать слева направо. https://cssanimation.rocks/pseudo-elements/ — вот собственно пример.
Транзишены соответственно юзаются когда, например, надо поменять свойства элемента при наведении или добавлении класса. При этом при добавлении/убирании разных классов можно настраивать везде свои удобные тайминги/задержки на то, как свойства будут меняться. В общем удобная декларативность во по всем фронтам.
Ах да, еще кейфреймы нужны когда необходимо врубить анимацию на старте страницы, не прибегая при этом к js.
https://cssanimation.rocks/transition-vs-animation/ — вот это еще можете чекнуть.

Транзишен лучше, именно из-за «когда убираю курсор, все без анимации». Вообще кейфреймы сделаны для более сложных вещей, скажем, когда нужно по вейпоинтам что-то гонять (по сложному маршруту т.е.), и другие нелинейные штуки делать. Если в кейфреймах только 0% и 100%, это оверкилл.

Отделить в коде можно чисто визуально, если это важно.

Войдите, чтобы написать ответ

Здравствуйте, в css пишу код для header, а он не изменяется. Можете указать на ошибки?

Источник

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

В прошлом уроке мы разобрали, как изменить стиль кнопки при наведении на неё курсора мыши. Для этой цели применяется псевдокласс :hover, а чтобы изменения происходили плавно, добавляется свойство transition, которое устанавливает время перехода.

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

Использование transition

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

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

transition: background-color 1s, border-color 0.5s;

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

Если требуется сделать задержку перед началом изменения, то добавляем в конец ещё время:

transition: background-color 1s 0.5s;

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

Рассмотрим добавление к кнопке рамки, сделанной через box-shadow. Да, это свойство добавляет тень, но вполне универсально, чтобы применяться, в том числе, и для формирования рамок у кнопок. Здесь используется две тени, одна поверх другой, что, в итоге, даёт зелёную рамку на некотором удалении от кнопки.

box-shadow: 0 0 0 2px #fff, /* Белая тень */ 0 0 0 4px #3f8a7c; /* Зелёная тень */

У кнопки при наведении будем менять цвет фона и после небольшой задержки показывать рамку. Для этого в transition запишем следующее:

transition: background-color 0.4s, box-shadow 0.2s 0.3s;

Окончательный код показан в примере 1.

Пример 1. Использование transition

Использование animation

Свойство transition имеет своё определённую роль и с его помощью нельзя сделать сложную анимацию элемента. Для этой цели предназначено свойство animation, работающее совместно с правилом @keyframes.

Сперва нашей анимации следует дать уникальное имя, пусть будет flip :

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

Конечное значение 100% в данном случае можно не указывать, поскольку оно совпадает с начальным.

Для вращения элемента используем свойство transform с функцией rotateX().

Теперь эту анимацию можно привязать к кнопке, добавив свойство animation к псевдоклассу :hover .

Саму анимацию можно воспроизвести несколько раз, добавив число повторений в конец набора значений:

animation: flip 1s 3; /* Повторяем три раза */

Или сделать анимацию бесконечной с помощью ключевого слова infinite .

animation: flip 1s infinite; /* Бесконечная анимация */

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

Пример 2. Использование @keyframes

Использование сторонних библиотек

Существуют готовые сторонние библиотеки CSS, предлагающие наборы различных анимаций. Принцип работы у них схожий — сперва подключается дополнительный CSS-файл, затем в своём стиле указывается желаемое имя анимации или к самому элементу добавляется определённый стилевой класс. Анимировать подобным образом можно не только кнопки, но и другие элементы — ссылки, изображения и т. д.

Ниже рассмотрим пару популярных библиотек.

Animate.css

Эту библиотеку можно установить через npm, Yarn или добавить напрямую через CDN:

После чего на сайте выбираем понравившуюся анимацию и вставляем её имя в свойство animation . Обязательно следует добавить и продолжительность самой анимации:

В примере 3 при наведении курсора на заблокированную кнопку она трясётся по горизонтали. Для анимации не всех кнопок, а только с атрибутом disabled , используем комбинацию псевдоклассов :disabled:hover .

Пример 3. Использование библиотеки Animate.css

Hover.css

Эта библиотека содержит набор разных эффектов с анимацией, иконками, тенями, уголками и рамками. Сама библиотека устанавливается через npm, Bower или скачивается напрямую с сайта GitHub. После этого подключается как обычный CSS-файл:

Эффекты для элемента работают путём добавления соответствующего класса к элементу. Все классы Hover.css начинаются с префикса hvr-, после чего идёт имя эффекта. К примеру, для создания пульсирующей кнопки при наведении, указываем класс hvr-pulse :

В примере 4 при наведении курсора мыши на кнопку она поднимается вверх и под кнопкой добавляется тень.

Пример 4. Использование библиотеки Hover.css

Итого

• Для плавного изменения значений стилевых свойств при наведении на кнопку курсора мыши используется свойство transition.
• Сложная анимация делается с помощью ключевых кадров через правило @keyframes.
• Сама анимация применяется к кнопке через псевдокласс :hover и свойство animation.
• Готовые стилевые библиотеки для анимации позволяют упростить создание эффектов для кнопок.

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

Создайте кнопку, чтобы при наведении на неё курсора мыши вокруг кнопки плавно появлялся контур (рис. 1).

Создайте кнопку, чтобы при наведении на неё курсора мыши внутри кнопки плавно появлялась рамка (рис. 1).

См. также

• :focus на мобильных устройствах
• animation
• box-shadow
• transition
• Анимация
• Анимация в CSS
• Анимация ссылок при наведении
• Всплывающая подсказка
• Добавление тени
• Добавление треугольника
• Оформление кнопок
• Переходы
• Переходы и анимация
• Переходы с помощью :hover
• Работа с типографикой
• Сочетание с псевдоклассами
• Трансформация в CSS

Рецепты

Источник