Css animate при наведении: CSS3 анимация при наведении: 9 примеров

Содержание

Анимации

Вам какой кофе?

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

Невозможная лампочка

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

Hover эффекты над изображениями на CSS

Эффект наведения на блоки с изображениями и текстом.

Организм, абстракция на CSS

Абстрактная анимация на чистом CSS

Коллекция css анимаций кнопок

Коллекция css анимаций для кнопок при наведении на них курсора

Эффект наведения следящий за курсором

Подчеркивание ссылки при наведении на пункт меню

Direction Reveal — появляющийся контент при наведении в направлении движения

Плагин определяет точку входа и выхода пользователя при наведении на блок и позволяет скрывать и отображать контент на основании знания о таком направлении входа/выхода. Скрытый контент может анимироваться в направлении, в котором пользователь входит и выходит с блока, что позволяет создавать интересные эффекты.

Xoverlay — CSS3 эффекты наведения

Xoverlay представляет из себя набор CSS стилей, который поможет довольно просто добавлять современные эффекты наведения на ваш сайт. Собрано более 50 эффектов, но если вы будете их комбинировать, то вариантов будет еще на несколько десятков больше — более 150 эффектов.

Эффекты при наведении для блоков с заголовками

Немножко свежих идей для красивого оформления блоков с заголовками при наведении на них курсора. Тонкие линии, белый цвет — ничего лишнего. Будем использовать 3D transform и transition для псевдо-элементов — работать данные эффекты будут только в современных браузерах.

Эффект наведения следующий за направлением курсора

Реализуем на CSS3 и jQuery эффект при наведении на картинку, при котором, накладываемый слой, перемещается от одной картинки к другой в направлении, которое определяется движением курсора мыши.

Необычные эффекты при наведении

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 — основой будут css3 transitions.

CSS3 анимация звездного ночного неба

Несколько экспериментов над фоном и его анимацией с помощью только CSS3. Статичный и анимированный фон звездного неба и анимированный фон падающего снега.

Опрос

В редакторе кода я предпочитаю тему оформления

Темную

Светлую

Новости

Подпишись

Присоединяйся, чтобы узнать все самое интересное для frontend разработчика и анонсы статей с сайта.

Разное

Свежие статьи

CSS — animation-play-state

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

Краткая информация

Значение по умолчанию	running
Наследуется	Нет
Применяется	Ко всем элементам, к псевдоэлементам ::before и ::after
Анимируется	Нет

Синтаксис ?

animation-play-state: running | paused

✖

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

running: Проигрывать анимацию.
paused: Поставить анимацию на паузу.

Пример


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-play-state</title>
  <style>
   .marquee {
    overflow: hidden; /* Скрываем строку за её пределами */
    white-space: nowrap; /* Запрещаем переносы слов */
    -webkit-animation: marquee 30s linear infinite;
    animation: marquee 30s linear infinite;
   }
   .  marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused; /* Пауза */
   }
   @-webkit-keyframes marquee {
    from { text-indent: 100%; }
    to { text-indent: -100%; }
   }
   @keyframes marquee {
    from { text-indent: 100%; }
    to { text-indent: -100%; }
   }
  </style>
 </head>
 <body>
  <div>Современная ситуация решительно заполняет
  трагический дедуктивный метод, ломая рамки
  привычных представлений.</div>
 </body>
</html>

В данном примере при наведении на текст курсора мыши движение бегущей строки останавливается. Стоит только убрать курсор и анимация продолжится с того же самого места.

Объектная модель

Объект.style.animationPlayState

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-play-state.

Opera до версии 12.10 поддерживает свойство -o-animation-play-state.

Firefox до версии 16 поддерживает свойство -moz-animation-play-state.

Спецификация ?

Спецификация	Статус
CSS Animations	Рабочий проект

✖

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные

Internet Explorer	Chrome	Opera		Safari	Firefox
10	3	12	12.10	4	5	16

Android	Firefox Mobile		Opera Mobile		Safari Mobile
2	5	16	12	12.10	4

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Анимация

См. также

@keyframes
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-timing-function

Css Hover Анимационные дизайны, темы, шаблоны и загружаемые графические элементы на Dribbble

Эффект наведения карты просмотра
Эффект наведения карты
Посмотреть ✨ Анимация при наведении на кнопку
✨ Анимация при наведении на кнопку
Подсветка кнопки просмотра

Подсветка кнопок
Просмотр 🍔 3D-кнопка
🍔 Кнопка 3D
Просмотр ссылки при наведении
Наведение ссылки
Посмотреть Бруно Навигация
Бруно Навигейшн
Посмотреть 🔗Hover с анимированными буквами
🔗Hover с анимированными буквами
Просмотр Скачать и загрузить эффекты наведения
Скачать и загрузить эффекты наведения
Посмотреть радужную кнопку при наведении
Радужная кнопка Hover
Посмотреть Hover3d. js
Hover3d.js
Просмотр игривых наведения на кнопку
Игривое нажатие кнопок
Наведение кнопки «Загрузить»
Наведение кнопки загрузки
Просмотр эффектов наведения на кнопку
Эффекты при наведении кнопки
Просмотр эффектов наведения на кнопку #2
Эффекты наведения на кнопку #2
Эффект наведения кнопки просмотра
Эффект наведения кнопки
Посмотреть кнопку «Нравится» для Figma.
Cool
Кнопка «Нравится» для Figma.Cool
Посмотреть необычную кнопку
Необычная кнопка
Просмотр эффектов искажения изображения с помощью фильтров SVG
Эффекты искажения изображения с фильтрами SVG
Просмотр эффектов искажения изображения с помощью фильтров SVG
Эффекты искажения изображения с фильтрами SVG
Просмотр эффектов переключения некоторых комбинированных карт (CodePen)
Переключение эффектов некоторых комбинированных карт (CodePen)
Посмотреть анимацию информационных карточек
Анимация информационных карточек
Посмотреть концепцию Lookbook
Концепция лукбука
Посмотреть анимированный аккордеон CSS
Анимированный аккордеон CSS
Посмотреть кнопку «Поделиться в социальных сетях»
Кнопка «Поделиться в социальных сетях»

Зарегистрируйтесь, чтобы продолжить или войдите

Загрузка еще…

Как использовать Hover Animation в веб-дизайне

Скачать
400+ функций
Конструкторы сайтов
Премиум
Форумы
Блог
Помощь

RU
Войти
Зарегистрироваться

Дом
Функции
Анимационные эффекты
Анимация при наведении

Эффект наведения для элемента — это изменение его внешнего вида при наведении на него курсора. Hover Animation автоматически привлекает внимание посетителей к Контенту и повышает вовлеченность и взаимодействие на веб-сайте. На панели свойств вы можете изменить наведение для цвета, границы, радиуса, тени и т. д., а также установить продолжительность.

Скачать для Windows Скачать для Mac

Поиск по категориям функций

Элементы веб-страницы

Поддерживаемые системы

Визуальный редактор страниц

Элементы дизайна

Библиотеки мультимедиа

Свойства элемента

Адаптивный 90 005

Эффекты анимации

Настройки темы

Контактная форма

Заголовок и Нижний колонтитул

Блог

Электронная торговля

SEO

Пользовательский код

Функции приложения

Свойства сайта и страницы

Виджеты WordPress