ТОЛЬКО CSS Анимация при наведении на кнопку, анимация при наведении

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

<button id = "navbut" style = "position: fixed;right: 0;">
  <div id = "line1"></div>
  <div id = "line2"></div>
  <div id = "line3"></div>
</button>
#line1 {
  position         : relative;
  height           : 1px;
  width            : 3em;
  background       : rgb(255, 255, 255);
  margin-top       : 0.625rem;
  transform-origin : 100% 50% 0px;
  transform        : translate(0px);
  }
#line2 {
  position         : relative;
  height           : 1px;
  width            : 3em;
  background       : rgb(255, 255, 255);
  margin-top       : 0.725rem;
  transform-origin : 100% 50% 0px;
  transform        : translate(0px);
  }
#line3 {
  position         : relative;
  height           : 1px;
  width            : 3em;
  background       : rgb(255, 255, 255);
  margin-top       : 0.825rem;
  transform-origin : 100% 50% 0px;
  transform        : translate(0px);
  }
#navbut {
  background : none;
  width      : 3rem;
  top        : 0.rem;
  cursor     : pointer;
  border     : none;
  }
#navbut:hover>#line1 {
  animation: sha 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
#navbut:hover>#line2 {
  animation: sh 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
@keyframes sh {
  100% {transform: scale(0.75, 1); }
  }
@keyframes sha {
  100% {transform: scale(0.45, 1); }
  }

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
37
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Можно без анимации. Просто используйте преобразование.

Пример:

button{
    transform: scale(1);
    transition: transform ease 1s;
} 

button:hover{
    transform: scale(0.89);
}

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

William ဗ 02.04.2022 15:39

Другие вопросы по теме