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

Содержание

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

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

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

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

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

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

.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

Вам надо поставить на .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;
}
. 
     (adsbygoogle = window.adsbygoogle || []).push({});
 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.

163. Как сделать плавный переход в CSS — Анимация — codebra

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

Код HTML

<a href = "/" class = "link">Ссылка</a>

Код CSS

.link {
padding: 10px 20px;
background: #F1F1F1;
color: #000;
}.link:hover {
background: #AAAAAA;
}

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

Код CSS

.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. Чтобы понять, чем они отличаются, попробуйте каждый по очереди. Для упрощения кода эти три строчки можно записать одной. Далее равнозначный пример:

Код CSS

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

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

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

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

Код CSS

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

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

Код CSS

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

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

Свойство background для работы с фономЦвета и фон

Работа с файлами в Python Знакомство с Python

Первое знакомство с PythonЗнакомство с Python

Написание модулей в PythonЗнакомство с Python

Добавляем градиент к фону элементаЦвета и фон

Типы данных в PythonЗнакомство с Python

Погружение в PythonЗнакомство с Python

Обработка исключений (try/except) в PythonЗнакомство с Python

Основы функций в PythonЗнакомство с Python

Предыдущий урок «159. Типы списков в CSS» Следующий урок «164. Трансформирование элементов при помощи CSS»

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

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

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

Просмотрено 45 тысяч раз

Кажется, у меня проблемы с анимацией описания при наведении. Сам ховер работает нормально и появляется именно там, где он находится; однако при наведении курсора на элемент или вдали от него, похоже, не возникает эффекта затухания. Вместо этого поле описания резко появляется в пределах 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
наведение
переход

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

 #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; }

Пробовал сам в своем коде. Просто избавьтесь от непрозрачности, и это сработает. Смотрите 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 при наведении на div

У меня есть следующий код, но я не могу сделать плавный переход при наведении.

 <дел>
     
     <дел>

Я применил эффект перехода к текущему классу, но по какой-то причине он не обнаруживает эффект.

Демонстрация: https://jsfiddle.net/squidraj/r4LLf4w0/

Любая помощь приветствуется.

html
css

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

 .image_container {
  положение: родственник;
  ширина: 279 пикселей;
  высота: 279 пикселей;
}
.image_container img {
  дисплей: блок;
  положение: родственник;
}
.bio_overlay {
  фон: #ffc27f;
  внизу: 0;
  высота: 100%;
  слева: 2,5 бэр;
  непрозрачность: 0,4;
  положение: абсолютное;
  справа: 0;
  сверху: 0;
  переход: непрозрачность 0,5 с, плавность перехода 0 с;
  ширина: 100%;
  непрозрачность: 0;
}
. image_container: наведение .bio_overlay {
  непрозрачность: 0,4;
}

 <дел>
  <рисунок>
    
  
  <дел>

переход не работает с видимостью . он работает только с «вычисляемыми» значениями, такими как (0,1) и так далее… вместо видимости используйте opacity

Просто замените видимость : теги на непрозрачность : теги . https://jsfiddle.net/r4LLf4w0/2/

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

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

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

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

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

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

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

163. Как сделать плавный переход в CSS — Анимация — codebra

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

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

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

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

html — Плавный переход CSS при наведении на div

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

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

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

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

Рубрики

Рубрики