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

Как сделать плавный hover в css

  • автор:

2.20. CSS3-переходы

CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms .

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover . Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).

Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after . Для задания всех свойств перехода обычно используют краткую запись свойства transition .

CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.

Создание плавных изменений свойств элементов

  • Содержание:
  • 1. Название свойства transition-property
  • 2. Продолжительность перехода transition-duration
  • 3. Функция перехода transition-timing-function
  • 4. Задержка перехода transition-delay
  • 5. Краткая запись перехода transition
  • 6. Плавный переход нескольких свойств
  • 7. Примеры переходов для различных свойств
Поддержка браузерами

IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini:
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Название свойства transition-property

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

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

transition-property
Значения:
none Отсутствие свойства для перехода.
all Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента.
свойство Определяет список CSS-свойств, перечисленных через запятую, участвующих в переходе.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
div < width: 100px; transition-property: width; >div:hover

2. Продолжительность перехода transition-duration

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

transition-duration
Значения:
время Время перехода указывается в секундах или миллисекундах, например, 2s или 5ms .
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

3. Функция перехода transition-timing-function

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

transition-timing-function
Значения:
ease Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) .
linear Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1) .
ease-in Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) .
ease-out Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) .
ease-in-out Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) .
cubic-bezier(x1, y1, x2, y2) Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Для создания более реалистичных анимаций используйте функцию cubic Bézier:

easing

Название функции перехода CSS значение функции
easeInSine cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo cubic-bezier(1, 0, 0, 1)
easeInCirc cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack cubic-bezier(0.68, -0.55, 0.265, 1.55)

4. Задержка перехода transition-delay

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

transition-delay
Значения:
время Время задержки перехода указывается в секундах или миллисекундах.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

5. Краткая запись перехода

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;

Если воспользоваться значениями по умолчанию, то запись

6. Плавный переход нескольких свойств

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

7. Примеры переходов для различных свойств

Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.

Как сделать у изображения плавный :hover?

Есть два изображения для ссылки. Нужно что бы один фон ссылки, в виде изображения переходил плавно во второе.

Отслеживать
задан 21 фев 2014 в 6:52
177 3 3 серебряных знака 13 13 бронзовых знаков

css crossfade по-моему только в chrome работает всё ещё, можно через opacity сделать что на css что на js.

21 фев 2014 в 6:59

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Вот примеры на css:

 
Label
Label
switchedBackground < width: 300px; height: 200px; position: relative; display: block; >.switchedBackground .bg1 , .switchedBackground .bg2 < width: 100%; height: 100%; position: absolute; top: 0; left:0; transition: all 2s; >.switchedBackground .bg1 < background: url('http://placehold.it/300x200/000/00ee00&text=1'); opacity:1; >.switchedBackground .bg2 < background: url('http://placehold.it/300x200/000/00ee00&text=2'); opacity:0; >.switchedBackground .label < margin: auto; position: absolute; top: 0; >.switchedBackground:hover .bg2 < opacity: 1; >/* только в chrome */ .switchedBackground2 < width: 300px; height: 200px; display: block; background: url('http://placehold.it/300x200/000/00ee00&text=3'); transition: all 3s; >.switchedBackground2:hover < background: url('http://placehold.it/300x200/000/00ee00&text=4'); transition: all 3s; >

Отслеживать
ответ дан 21 фев 2014 в 7:19
18.1k 21 21 серебряный знак 42 42 бронзовых знака
тогда уж не transition all, a transition background или transition opacity
21 фев 2014 в 7:24
это ваше дело, я писал просто чтобы показать как надо, а не для копипасты.
21 фев 2014 в 7:26

eicto спасибо, идея крутая! css3.bradshawenterprises.com/cfimg — здесь нашел интересные решения думаю как вот все к ссылке применить.

21 фев 2014 в 9:00

css

.example, .example::after, .example > span < display: block; height: 50px; width: 200px; >.example < background-image: url(http://placehold.it/200x50/09c/09c.png); position: relative; > .example::after < background-image: url(http://placehold.it/200x50/c90/c90.png); content: ""; opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; > .example:hover::after < opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; >.example::after, .example > span < position: absolute; >.example > span < color: #000; line-height: 50px; text-align: center; z-index: 2; >.example:hover > span

Отслеживать
ответ дан 21 фев 2014 в 9:28
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак
Шикарный метод. надо теперь с цветом текста разобраться а то его в начале вообще не видно.
21 фев 2014 в 10:25
@mace, его не из-за цвета не было видно. Попробуйте так. Обновил пример.
21 фев 2014 в 10:45

  • html
  • css
  • javascript
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS

Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS

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

Мы будем использовать только html и css. JavaScript нам не понадобится.

Итак, напишем немного html кода. Мы поместим нашу картинку img в блок с классом photo

 

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

Далее перейдем к css. С помощью hover мы сможем менять значения у свойств.

В данном случае, мы увеличим картинку, изменив для нее свойство transform. Запишем это в коде:

.photo:hover img

Здесь мы прописали следующую инструкцию: при наведении (hover) на блок, в котором содержится картинка (класс photo), мы меняем значение transform у самой картинки (img).

Значение scale — это на сколько мы масштабируем картинку. По умолчанию идет значение 1.

Чтобы добавить немного плавности переходу, добавим свойство transition для тега img

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

Теперь картинка у нас увеличивается плавно, но она выходит за пределы свой условной рамки. Чтобы это исправить, нам нужно добавить к блоку photo свойство overflow со значением hidden

.photo

Мы, как бы, говорим: все что выходит за пределы этого блока — скрываем.

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

В итоге получится вот такой код:

.photo < width: 400px; height: 350px; overflow: hidden; >img < transition: transform 0.25s; >.photo:hover img

Надеюсь вы поняли принцип, по которому можно делать увеличение картинки при ховере. Я прикреплю наше видео, где еще раз подробно все объясняю.

Плавные градиенты

В CSS вы не можете плавно менять фоновый градиент. Было бы неплохо, если бы вы могли:

.gradient < background-image: linear-gradient( to right, hsl(211, 100%, 50%), hsl(179, 100%, 30%) ); transition: background-image 0.5s linear; >.gradient:hover

Но нет. Он сразу же переходит от одного градиента к другому, без плавного перехода между ними.

Так что давай те попробуем это исправить. Мы можем добиться этого эффекта с помощью псевдоэлемента и смены прозрачности.

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

.gradient < position: relative; background-image: linear-gradient( to right, hsl(211, 100%, 50%), hsl(179, 100%, 30%) ); z-index: 1; >.gradient::before < position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient( to bottom, hsl(344, 100%, 50%), hsl(31, 100%, 40%) ); z-index: -1; transition: opacity 0.5s linear; opacity: 0; >.gradient:hover::before

Псевдоэлемент скрываем с помощью opacity: 0 . При наведении, плавно меняется на opacity: 1 . Это создает иллюзию смены градиента. Также требуется небольшая работа с z-index для обеспечения того, чтобы псевдоэлемент оставался располагаться за содержимым основного элемента.

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

Ознакомьтесь с полным рабочим примером:

Свежие записи

  • 3 инструмента для тестирования веб-производительности
  • Плавный скроллинг HTML страницы к нужному элементу
  • Анимация спрайтов в HTML5 Canvas
  • Поддержка устройств с retina дисплеем
  • 5 советов для супер быстрого CSS

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

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