html — Плавный переход/анимация при hover на иконку
Вопрос задан
Изменён
7 лет 2 месяца назад
Просмотрен
678 раз
Внутри блока есть спозиционированная иконка, при наведении на которую появляется текст и бордер. Суть в том, что нужно не просто появление этих элементов — они должны как бы выезжать из-под неё вправо. Пробовал использовать анимацию, но она почему-то не срабатывает.
Буду очень благодарен, если кто-нибудь сможет помочь в решении проблемы.
<link rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
<div>
<i> </i> 
<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.)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
<div>
<i> </i> 
<p>This app is no longer available</p>
</div>
</div>
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
163.
Как сделать плавный переход в CSS — Анимация — codebra
Когда пользователь наводит курсор на объект или нажимает на него, псевдокласс hover срабатывает мгновенно. Чтобы как-то сгладить переход, необходимо использовать анимацию. Приведем простой пример ссылки:
Теперь сгладим переход цвета фона при наведении курсора на ссылку. Для этого будем использовать три свойства: transition-property, transition-duration и transition-timing-function. Первое указывает на свойство, к которому мы применяем переход. Второе указывает продолжительность перехода. Третье указывает скорость перехода, в зависимости от времени.
В нашем примере устанавливается переход для свойства background, длительностью 1s и с временной функцией ease. Если необходимо установить плавный переход для всех свойств, то замените конкретное свойство на all, то есть таким образом: transition-property: all.
Теперь рассмотрим значения, которые может принимать свойство transition-timing-function. Достаточно тяжело описать работу каждого значения, поэтому просто их перечислю: ease
, linear, ease-in, ease-out, ease-in-out и cubicbezier. Чтобы понять, чем они отличаются, попробуйте каждый по очереди. Для упрощения кода эти три строчки можно записать одной. Далее равнозначный пример:
Приведенные ранее примеры небыли кроссплатформенными. Чтобы свойство transition корректно работало во всех браузерах, необходимо добавлять специальные приставки (вендорные префиксы). Вот основные:
-webkit- для Chrome, Safari и всех браузеров, написанных на движке WebKit;
Кстати, в свойстве 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 — Плавный переход при наведении?
спросил
Изменено
2 года, 2 месяца назад
Просмотрено
41к раз
Кажется, у меня проблемы с анимацией описания при наведении. Сам ховер работает нормально и появляется именно там, где он находится; однако кажется, что при наведении курсора на элемент или вдали от него не возникает эффекта затухания. Вместо этого поле описания резко появляется в пределах 0,5 с, указанных в CSS, и исчезает таким же образом. Я хочу создать плавный эффект перехода, когда поле описания появляется и исчезает. Может кто-нибудь, пожалуйста, помогите мне настроить это?
bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
<div>
<i> </i> 
<p>This app is no longer available</p>
</div>
</div>
Как сделать плавный переход в CSS — Анимация — codebra
Если необходимо установить плавный переход для всех свойств, то замените конкретное свойство на 
Типы списков в CSS» Следующий урок «164. Трансформирование элементов при помощи CSS»
}
#описание а {
цвет:{цвет:текст};
-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 сек. }
}
#описание a {цвет:{цвет:текст}; }
#description:hover { непрозрачность:0.6; }
детское изображение + изображение {
дисплей:блок;
непрозрачность:1;
должность: родственница;
z-индекс: 10;
}
image_container: наведение .bio_overlay {
непрозрачность: 0,4;
} 