Css плавный hover: Плавная трансформация | CSS свойство transition — Примеры

html — Плавный переход/анимация при hover на иконку

Вопрос задан 7 лет 6 месяцев назад

Изменён 7 лет 6 месяцев назад

Просмотрен 760 раз

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

Буду очень благодарен, если кто-нибудь сможет помочь в решении проблемы.

.block {
  position: relative;
  margin: 30px auto;
  width: 30%;/* изменено для снипета*/
  height: 100px;/* изменено для снипета*/
  box-shadow: 0 0 5px 0 black;

}
.  warning-box {
    display: inline-block;
    position: absolute;
    top: 8px;
    left: 10px;
    padding-right: 5px;
    color: #FFB700;
    border: 1px solid transparent;
    line-height: 1;
}
.warning-box p {
  display: none;
}
.warning-box .fa {
  color: #ffc107;
  font-size: 19px;
  position: absolute;
  top: -1px;
  left: -1px;
}
.warning-box:hover {
  width: 160px;
  border: 1px solid #ff8600;
  border-radius: 8px;
  translateX: 100px;
  transition: 1s;
}
.warning-box:hover .fa  {
  color: #ff8600;
  transition: 200ms;
}
.warning-box:hover .text {
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 10px;
  width: 150px;
  padding: 0 0 0 10px;
  margin: 0;
  font-family: "Open Sans";
  font-size: 10px;
  line-height: 10px;
  color: #ff8600;
}

<link rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
  <div>
    <i>&nbsp</i>&nbsp
    <p>This app is no longer available</p>
  </div>
</div>

• html
• css
• css-animation

4

Вам надо поставить на .warning-box .text стиль width: 0px изначально. Это блок спрячет. А на .warning-box:hover .text поставить width: 150px; и добавить transition, тогда будет выезжать 🙂

Также обратите внимание на white-space: nowrap; overflow:hidden;. Это нужно, чтобы текст принудительно вставал в одну строчку.

Вот типа такого:
(из вашего примера были изменены только .warning-box .text

и .warning-box:hover .text.)

.block {
  position: relative;
  margin: 30px auto;
  width: 30%;/* изменено для снипета*/
  height: 100px;/* изменено для снипета*/
  box-shadow: 0 0 5px 0 black;

}
. warning-box {
    display: inline-block;
    position: absolute;
    top: 8px;
    left: 10px;
    padding-right: 5px;
    color: #FFB700;
    border: 1px solid transparent;
    line-height: 1;
}
.warning-box p {
  display: none;
}
.warning-box .fa {
  color: #ffc107;
  font-size: 19px;
  position: absolute;
  top: -1px;
  left: -1px;
}
.warning-box:hover {
  width: 160px;
  border: 1px solid #ff8600;
  border-radius: 8px;
  translateX: 100px;
  transition: 1s;
}
.warning-box:hover .fa  {
  color: #ff8600;
  transition: 200ms;
}
.warning-box .text {
  width: 0px;
  position: absolute;
  display: inline-block;
  transition: 200ms;
  top: 2px;
  left: 10px;
  padding: 0 0 0 10px;
  margin: 0;
  font-family: "Open Sans";
  font-size: 10px;
  line-height: 10px;
  color: #ff8600;
  white-space: nowrap;
  overflow:hidden;
}
.
  warning-box:hover .text {
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
  <div>
    <i>&nbsp</i>&nbsp
    <p>This app is no longer available</p>
  </div>
</div>

Еще один вариант, добавить в класс .warning-box свойства overflow:hidden и установить начальную ширину, в данном случае width:20px;

  
.block {
  position: relative;
  margin: 30px auto;
  width: 30%;
  height: 100px;
  box-shadow: 0 0 5px 0 black;

}
.warning-box {
    display: inline-block;
    position: absolute;
    top: 8px;
    left: 10px;
    padding-right: 5px;
    color: #FFB700;
    border: 1px solid transparent;
    line-height: 1;
    overflow:hidden;
    width:20px;
}
. warning-box p {
  display: none;
}
.warning-box .fa {
  color: #ffc107;
  font-size: 19px;
  position: absolute;
  top: -1px;
}
.warning-box:hover {
  width: 160px;
  border: 1px solid #ff8600;
  border-radius: 8px;
  translateX: 100px;
  transition: 1s;
  
}
.warning-box:hover .fa  {
  color: #ff8600;
  transition: 200ms;
}
.warning-box:hover .text {
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 10px;
  width: 150px;
  padding: 0 0 0 10px;
  margin: 0;
  font-family: "Open Sans";
  font-size: 10px;
  line-height: 10px;
  color: #ff8600;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div>
  <div>
    <i>&nbsp</i>&nbsp
    <p>This app is no longer available</p>
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Плавные трансформации на чистом CSS. Свойство transition — журнал «Доктайп»

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

Свойство в общем виде записывается так:

transition: property duration timing-function delay;

• property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all, переходы будут применяться ко всем свойствам элемента.
• duration — определяет длительность перехода. Задаётся в секундах (s) или миллисекундах (ms).
• timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear, ease, ease-in, ease-out, ease-in-out.
• delay — время задержки перед началом перехода. Задаётся в секундах ( s) или миллисекундах (ms).

Примеры использования

В данном примере применяем плавный переход цвета фона (background-color) для элемента p при наведении курсора. Фон плавно изменится за секунду.

p {
  background-color: blue;
  transition: background-color 1s ease-in-out;
}
p:hover {
  background-color: red;
}

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

👉 Если вы не понимаете, что написано в этом примере кода и откуда там p, прочитайте статью про селекторы.

В этом примере применяем переход для двух свойств (width и height) одновременно. При наведении курсора размеры элемента p плавно увеличиваются.

p {
  width: 100px;
  height: 100px;
  transition: width 2s, height 4s;
}
p:hover {
  width: 200px;
  height: 200px;
}

Изменение размера элемента при наведении курсора

Анимировать изменение цвета текста при наведении на ссылку.

a {
  color: blue;
  transition: color 0.3s ease-in-out;
}  
a:hover {
  color: red;
}

Изменение цвета ссылки при наведении курсора

Изменение размера шрифта при наведении на текст:

p {
  font-size: 16px;
  transition: font-size 0.5s ease;
}
p:hover {
  font-size: 24px;
}

Изменение размера шрифта при наведении курсора

Нюансы

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

• Цветовые свойства: color, background-color, border-color и другие.
• Размеры и отступы: width, height, padding, margin, top, right, bottom, left и другие.
• Свойства трансформации: transform (включая rotate, scale, translate, skew и другие).
• Некоторые свойства текста: font-size, letter-spacing, word-spacing, line-height.
• Свойство прозрачности: opacity.
• Свойства границы: border-width, border-radius.
• Свойство позиционирования: position.

❌ Не все CSS-свойства могут быть анимированы. Например, свойства display, content, visibility и некоторые другие не поддерживают анимацию.

Переходы не работают при изменении свойств с помощью JavaScript. В этом случае лучше использовать CSS-анимации или JavaScript-анимации.

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

Поддержка браузерами

Свойство transition хорошо поддерживается всеми современными браузерами. Для детальной информации рекомендуется обратиться к сайту caniuse.

Материалы по теме

• Тренажёры по CSS-анимациям от HTML Academy.
• : hover, : focus, : active — как работают состояния элементов.
• Функции плавности — подборка функций плавности от Андрея Ситника и Ивана Соловьева.

---

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как верстать и оформлять цитаты

Красиво, просто и оригинально, чтобы текст заметили и запомнили.

CSS

• 22 июня 2023

Окей, ChatGPT, сделай мне кнопку

История одного разговора

CSS

• 21 июня 2023

Как использовать свойство object-fit

Как растягивать или сжимать картинки под размеры бокса.

CSS

• 15 июня 2023

Единицы измерения в CSS: px, rem, em, fr, %

Где и как использовать.

CSS

• 9 июня 2023

Как создать рамку вокруг элемента. CSS-свойство border

Цветные, точечные, пунктирные рамки и многое другое.

CSS

• 31 мая 2023

Как сделать анимацию любой сложности. Свойство animation

Примеры и нюансы использования.

CSS

• 29 мая 2023

Как создать тени на CSS: свойство box-shadow

Внутренние, внешние, с градиентом — на все случаи жизни.

CSS

• 28 мая 2023

Как установить стиль шрифта. CSS-свойство font

Семейства шрифтов, начертание и размеры.

CSS

• 27 мая 2023

Как работает transform в CSS на примерах

Интерактивная статья — попробуйте анимировать сами.

CSS

• 23 мая 2023

Как оформить текст: 11 главных CSS-свойств

Инструкция для любителей поиграться со шрифтами.

CSS

• 23 мая 2023

css — Плавный переход при наведении?

спросил 9 лет, 2 месяца назад

Изменено 2 года, 6 месяцев назад

Просмотрено 44к раз

Кажется, у меня проблемы с анимацией описания при наведении. Сам ховер работает нормально и появляется именно там, где он находится; однако при наведении курсора на элемент или вдали от него, похоже, не возникает эффекта затухания. Вместо этого поле описания резко появляется в пределах 0,5 с, указанных в CSS, и исчезает таким же образом. Я хочу создать плавный эффект перехода, когда поле описания появляется и исчезает. Может кто-нибудь, пожалуйста, помогите мне настроить это?

КОД:

 #описание {
    непрозрачность:0;
    фон:#fff;
    z-индекс: 30;
    положение: фиксированное;
    поле слева: 249px;
    верхняя граница:-5px;
    граница: 1px сплошная #000;
    ширина: 230 пикселей;
    высота: 299 пикселей;
    цвет:{цвет:текст};
    -webkit-transition: непрозрачность 0,5 с;
    -moz-transition: непрозрачность 0,5 с, плавность входа-выхода;
    -ms-transition: непрозрачность 0,5 с, плавность входа-выхода;
    -o-переход: непрозрачность 0,5 с, плавность входа-выхода;
    переход: непрозрачность 0,5 сек. }
#описание а {
    цвет:{цвет:текст};
    -webkit-transition: непрозрачность 0,5 с;
    -moz-transition: непрозрачность 0,5 с, плавность входа-выхода;
    -ms-transition: непрозрачность 0,5 с, плавность входа-выхода;
    -o-переход: непрозрачность 0,5 с, плавность входа-выхода;
    переход: непрозрачность 0,5 сек.  }
#sidebar:hover #description {
    непрозрачность: 0,6;
    -webkit-transition: непрозрачность 0,5 с;
    -moz-transition: непрозрачность 0,5 с, плавность входа-выхода;
    -ms-transition: непрозрачность 0,5 с, плавность входа-выхода;
    -o-переход: непрозрачность 0,5 с, плавность входа-выхода;
    переход: непрозрачность 0,5 сек. }
 

• css
• наведение
• переход

2

Попробуйте это…

 #description {
    непрозрачность:0;
    фон:#fff;
    z-индекс: 30;
    положение: фиксированное;
    поле слева: 249px;
    верхняя граница:-5px;
    граница: 1px сплошная #000;
    ширина: 230 пикселей;
    высота: 299 пикселей;
    цвет:{цвет:текст};
    -webkit-transition: непрозрачность 0,5 с;
    -moz-transition: непрозрачность 0,5 с, плавность входа-выхода;
    -ms-transition: непрозрачность 0,5 с, плавность входа-выхода;
    -o-переход: непрозрачность 0,5 с, плавность входа-выхода;
    переход: непрозрачность 0,5 сек. 
}
#описание a {цвет:{цвет:текст}; }
#description:hover { непрозрачность:0.6; }
 

3

Пробовал сам в своем коде. Просто избавьтесь от непрозрачности, и это сработает. Смотрите youtiming dot com для демонстрации.

‘opacity’ — это свойство css, которое вам нужно для указания значения уровня: http://www.w3schools.com/cssref/css3_pr_opacity.asp

Вот живой пример на скрипке, которую я только что сделал

Это Разметка HTML

Это CSS

 .kid {
    максимальная ширина: 250 пикселей;
    должность: родственница;
}
.детское изображение {
    дисплей:блок;
    непрозрачность:1;
    высота: авто;
    переход: легкость .6s;
    ширина:100%;
    положение: абсолютное;
    z-индекс: 12;
}
.детское изображение: наведение {
    непрозрачность:0;
}
.детское изображение + изображение {
    дисплей:блок;
    непрозрачность:1;
    должность: родственница;
    z-индекс: 10;
}
 

Скрипка здесь: https://jsfiddle. net/cdsaekv9/7/

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — Плавный переход CSS от положения относительно к абсолютному положению с помощью :hover::after

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

Я хочу что-то подобное, но с плавным переходом.

Вот CSS без перехода, потому что я не смог заставить его работать.

 раздел {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  цвет: #ab9b8c;
  размер шрифта: 20px;
  межбуквенный интервал: 1,5 пикселя;
  текстовое оформление: нет;
  высота: 100%;
  курсор: указатель;
  переход: высота 2s;
  положение: родственник;
}
div: hover:: после {
  содержание: '';
  положение: абсолютное;
  внизу: -1px;
  ширина: 30 пикселей;
  высота: 3 пикселя;
  радиус границы: 200 пикселей;
  граница: 1px сплошная #9ф9182;
} 

 
 тест
  
 

• html
• css
• css-переходы

3

Как упоминал Paulie_D, вы не можете выполнять переходы по атрибутам position . См.: https://www.w3schools.com/cssref/pr_class_position.asp «Animatable: нет».

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

 div {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  цвет: #ab9б8с;
  размер шрифта: 20px;
  межбуквенный интервал: 1,5 пикселя;
  текстовое оформление: нет;
  высота: 100%;
  курсор: указатель;
  переход: высота 2s;
  положение: родственник;
}
div :: после {
  содержание: '';
  положение: абсолютное;
  внизу: -1px;
  ширина: 0 пикселей;
  высота: 3 пикселя;
  радиус границы: 200 пикселей;
  граница: 0px сплошная #9f9182;
  переход: все 0,2 с линейно;
}
div: hover:: после {
  ширина: 30 пикселей;
  граница: 1px сплошная #9f9182;
  переход: все 0,2 с линейно;
} 

 
 тест
 

Вот непрозрачность:

 раздел {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  цвет: #ab9b8c;
  размер шрифта: 20px;
  межбуквенный интервал: 1,5 пикселя;
  текстовое оформление: нет;
  высота: 100%;
  курсор: указатель;
  переход: высота 2s;
  положение: родственник;
}
div :: после {
  содержание: '';
  положение: абсолютное;
  внизу: -1px;
  ширина: 30 пикселей;
  высота: 3 пикселя;
  радиус границы: 200 пикселей;
  граница: 1px сплошная #9f9182;
  непрозрачность: 0;
  переход: все 0,2 с линейно;
}
div: hover:: после {
  непрозрачность: 1;
  переход: все 0,2 с линейно;
} 

 
 тест
 

Вот оба сразу, почему бы и нет:

 div {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  цвет: #ab9b8c;
  размер шрифта: 20px;
  межбуквенный интервал: 1,5 пикселя;
  текстовое оформление: нет;
  высота: 100%;
  курсор: указатель;
  переход: высота 2s;
  положение: родственник;
}
div :: после {
  содержание: '';
  положение: абсолютное;
  внизу: -1px;
  ширина: 0 пикселей;
  высота: 3 пикселя;
  радиус границы: 200 пикселей;
  граница: 0px сплошная #9f9182;
  непрозрачность: 0;
  переход: все 0,2 с линейно;
}
div: hover:: после {
  ширина: 30 пикселей;
  непрозрачность: 1;
  граница: 1px сплошная #9ф9182;
  переход: все 0,2 с линейно;
} 

 
 тест
 

Так далее и так далее

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.