Плавный css hover: Переходы с помощью :hover | WebReference

Leave a Comment / Css / By /

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

Эффект плавного перехода в CSS часто применяется при наведении курсора на какой-нибудь элемент, например для кнопки. Когда при наведении курсора, кнопка меняет свой цвет, процесс замены происходит очень быстро и резко, то хочется это действие замедлить.

Добиться эффекта плавного перехода можно с помощью CSS свойства – transition, где
all – эффект замедления применяется ко всем возможным переходам
1s – время выполнения плавного перехода
ease – способ выполнения плавного перехода

transition: all 1s ease;

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

Демонстрация работы анимации кнопки, верхий рисунок: демо

Свойство transition следует прописать к элементу, в нашем случае это кнопка button, а не к его состоянию, то есть псевдоэлементу hover. Тогда плавный переход будет работать не только при наведении, но и при снятии курсора с элемента.

<h3>Плавный переход transition CSS. Кнопка</h3>
    <div>
      <a href="#">Заказать работу</a>
    </div>
 .button {
    background-color: #2bc6a4;
    border: none;
    border-radius: 15px;
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    width: 20%;
    margin: auto;
    font-family: sans-serif;
    font-size: 22px;
    text-decoration: none;
    transition: all 1s ease;
}

.button:hover {
    background-color: #4feac8;
}

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

Демонстрация работы анимации кнопки, нижний рисунок: демо

Создадим круг, при наведении на который будет плавно меняется его цвет. Для этого создадим тег div с классом circle, внутри которого пропишем тег span с текстом.

<h3>Плавный переход transition CSS.
Круг</h3>
    <div>
        <span>Иконка</span>
    </div>

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

В CSS коде оформим внешний вид первого круга, в обычном состоянии и он будет черного цвета.

.circle{
    background: #3d3d3d;
    width: 198px;
    height: 198px;
    margin: 0 auto;
    line-height: 200px;
    color: #fff;
    font-size: 1.8em;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    text-align: center;
}

Для текста ставим z-index: 2, таким образом текст будет на самом верхнем слое.

.circle span{
    position: relative;
    z-index: 2;
}

Для построения второго, зеленого круга, мы воспользуемся псевдоэлементом

after – это то, что идет после блока. Обязательно прописываем пустую строчку content: » «; иначе псевдоэлемент не отобразится. Зададим ширину и высоту точно такую же, как и у первого круга и желаемый цвет при наведении.

Прописываем display: block, чтобы наш псевдо-круг вообще появился. Итак, псевдо-круг расположился ниже под первым кругом. С помощью свойств position, мы совмещаем оба круга, друг под другом, а свойство z-index: 1, слой с псевдо-кругом размещает под текстом.

.circle::after{
    content: " ";
    width: 202px;
    height: 202px;
    background: #2bc6a4;
    position: absolute;
    display: block;
    border-radius: 50%;
    top: -1px;
    left: -1px;
    box-shadow: 0 0 0 0 #3d3d3d inset;
    transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;
}

Теперь необходимо сделать, чтобы при наведении зеленый круг пропадал, а вместо него появлялся черный. Поэтому мы будем делать следующее, при наведении на класс circle, псевдоэлемент after будет постепенно исчезать. Работа transition показана в строчке кода ниже.

transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;

и исчезнет совсем

width: 0;
height: 0;
font-size: 0;

исчезает красиво, по-центру

top: 100px;
left: 100px;

box-shadow растушёвывает края зеленого круга

.circle:hover::after{
    width: 0;
    height: 0;
    font-size: 0;
    top: 100px;
    left: 100px;
    box-shadow: 0 0 20px 20px #3d3d3d inset;
}

Итоги

На самом деле

свойство transition очень простое, успешность его применения зависит только от ваших знаний CSS в целом.

Вы можете узнать больше, просмотрев этот видеокурс «Вёрстка сайта с нуля»

  • Создано 25.04.2018 09:55:00
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Как сделать плавное появление блока CSS свойствами?

Существует несколько способов. Зная определённые принципы работы с CSS3, можно реализовать плавное появление блока CSS свойствами, тем самым воплотив в жизнь массу креативных идей для сайта. Как вариант – сделать плавное появление элемента, возникающее после наведения указателя мышки на какой-либо элемент на странице. Другой пример – демонстрация элемента спустя заданный временной промежуток без использования скриптов.

Сначала давайте рассмотрим вариант плавного появления блока CSS с помощью свойств при наведении. Нам предстоит сделать следующие шаги.

  1. Создаем два блока: один будет видимым и будет плавно возникать на странице, другой – будет скрытым.
  2. Заполним стили оформления.

    Для скрытого блока указываем полную прозрачность, а также прописываем для него скорость перехода между состояниями элемента. Для этого нам нужны теги opacity:0 и transition: 2 s. Обратите внимание, скорость перехода состояния элемента мы задали 2 секунды.
  3. Далее – самый важный шаг. Используя селектор .on-hover:hover+ .hidden-block, мы делаем так, чтобы при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. Элемент становится видимым, так как мы изменяем и прозрачность.

Важно: блок .hidden-block не располагается внутри .on-hover. Поэтому придётся использовать hover с +. Скрытый элемент в вашем случаи располагается внутри элемента, на который нужно навести курсор? Советуем обратиться к селектору .on-hover:hover+ .hidden-block.

Любуемся результатом.

Видимый

Скрытый

Теперь перейдём к плавному появление блока с помощью CSS с временной задержкой через использование правила @keyframes.

Хотите показывать элемент с некоторой задержкой? Тогда действуйте по этой схеме:

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

    Задайте свойство animation, в котором пропишите название анимации (show), её скорость (2 секунды) и число повторений (1). Указывая свойство animation-fill-mode со значением forwards, вы не допустите того, чтобы после выполнения анимации элемент принял первоначальное состояние. Он сохранит новый вид.
    Также зададим дополнительное свойство, которое отсрочит запуск анимации на 2 секунды (animation-delay).
  3. Через правило @keyframes, задаём последовательность, с которой будет появляться блок.

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

Плавное появление блока CSS

Думаем, после изучения нашей пошаговой инструкции, у вас не будет трудностей с настройкой анимации плавного появления блока CSS. Но если вдруг возникли дополнительные вопросы или комментарии, вы можете написать нам с помощью формы обратной связи. Оставляйте свои сообщения – будем рады ответить на них!

Как добиться плавной анимации границ при наведении… anycodings

Вопросы: Как добиться плавной анимации границ при наведении CSS

819

Я пытаюсь создать анимацию наведения для кнопки anycodings_css.

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

 
<голова>
<стиль>
дел {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  фон: белый;
  положение: родственник;
  анимация: mymove 800 мс;
  переход: все облегчение-в-выход;
}
@keyframesмоё перемещение {
  0%{
        граница слева: 1px сплошная;
    }
    25%
    {
    граница слева: 1px сплошная;
нижняя граница: 1px сплошная;
    }
    50%
    {
    граница слева: 1px сплошная;
нижняя граница: 1px сплошная;
        граница справа: 1px сплошная;
    }
    100%
    {
    граница слева: 1px сплошная;
нижняя граница: 1px сплошная;
        граница справа: 1px сплошная;
        верхняя граница: 1px сплошная;
    }
}


<тело>
 
Правило @keyframes
 

Примечание. Правило @keyframes не поддерживается в Internet Explorer 9.и более ранние версии.
 

<дел>

https://jsfiddle. net/ymbspr63/

Теперь, если вы видите, это выглядит довольно ужасно, и у anycodings_css нет гладкости. Я также использовал свойство перехода anycodings_css, но это не решило проблему anycodings_css. Что мне здесь не хватает?

Надеюсь, все понимают, чего я пытаюсь достичь с помощью anycodings_css. 🙂

Админы

УС

Всего ответов 1

30

Ответы 1 : из Как добиться плавной анимации границ при наведении CSS

Для работы перехода CSS необходимо, чтобы anycodings_css имел 2 конкретных значения для перехода между anycodings_css. Таким образом, для «плавного» перехода к anycodings_css необходимо иметь хорошо определенную начальную точку anycodings_css и конечную точку anycodings_css, которую вы предоставляете.

Таким образом, в этом сценарии все, что вам нужно добавить в anycodings_css, — это просто «граница: 1px (ИЛИ НОЛЬ) anycodings_css сплошная прозрачная;» свойство, которое anycodings_css даст им что-то для перехода.

🙂 Удачного кодирования!

0

Ссылка для ответа

мРахман

Генератор переходов CSS | MakingCSS

Превью

webkitmozo


Сохранено!


Сброшен!

Код CSS для копирования

Объяснение перехода

Свойство transition позволяет изменять значения свойств CSS элемента html плавно от одного значения к другому в течение определенного времени. Это свойство часто используется в состоянии :hover .

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

 ;

Синтаксис перехода выглядит следующим образом:

 #MyButton { width: 100px; цвет фона: #337ab7; белый цвет;  переход: все 0,3 с облегчение  }

Первый параметр определяет, какое свойство CSS3 будет затронуто переходом. все означает, что переход выполняется для любого свойства CSS.
В нашем случае мы могли бы заменить all на background-color 9.0072 .

Второй параметр определяет длительность перехода в секундах (с) или миллисекундах (мс). В нашем примере продолжительность составляет 0,3 секунды.

Третий параметр (необязательный) — кривая скорости перехода. Ниже приведены некоторые функции, которые можно использовать:

  • легкость: определяет эффект перехода с медленным началом, затем быстрым, затем медленным. Это значение по умолчанию.
  • linear: определяет эффект перехода с одинаковой скоростью от начала до конца.
  • easy-in: определяет эффект перехода с медленным началом.
  • easy-out: определяет эффект перехода с медленным концом.
  • easy-in-out: определяет эффект перехода с медленным началом и медленным концом.

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

Теперь, когда переход установлен, мы можем использовать :hover для изменения цвета при наведении курсора:

 #MyButton:hover { background-color: #1e4668;
}

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

 
 
 #MyDiv { width: 100px; высота: 100 пикселей; цвет фона: #337ab7;  переход: фоновый цвет 0,3 с легкости, высота 2 с легкости, ширина 2 с 2 с легкости; 
}
#MyDiv:hover {цвет фона: #e86200; высота: 150 пикселей; ширина: 150 пикселей;
} 
 Не следует забывать систематически добавлять следующие префиксы браузера, чтобы оставаться совместимым с максимально возможным количеством браузеров:
 #MyDiv { -webkit-transition: все 0,3 с легкости; -moz-transition: все 0.3с облегчение; -o-transition: все 0,3 с легкости; переход все 0.3s легкость;
} 
 Учитывая, что эти 4 строки должны быть включены, использование генератора CSS, такого как MakingCSS, экономит время и позволяет избежать ошибок.

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

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