@rootnoroot

Как добавить плавность на hover?

Уже запарился, не получается
кто мож подскажет?

a {
					display: inline-block;
					color: rgb(255, 255, 255);
					font-size: 15px;
					font-weight: 700;
					line-height: 110%;
					letter-spacing: 0%;
					background: linear-gradient(42.48deg, rgb(251, 67, 0) 29.177%, rgb(251, 83, 0) 42.639%, rgb(251, 125, 0) 68.896%, rgb(251, 161, 0) 88.559%);
					padding: 20px 45px;
					margin-top: 55px;
					text-decoration: none;
					position: relative;
					overflow: hidden;
					transform-origin: center;
					animation: pulse 2s infinite alternate;
					transition: transform 0.5s ease; /* добавляем плавный переход для transform при наведении */
			}
			
			@keyframes pulse {
					0%, 70% {
							transform: scale(1) rotate(0deg);
					}
					100% {
							transform: scale(1.2) rotate(-4deg);
					}
			}
			
			a::before {
					width: 30px;
					height: 100%;
					position: absolute;
					left: -30px;
					top: 0px;
					content: "";
					background: rgba(255, 255, 255, 0.15);
					animation: moveBefore 4s infinite;
			}
			
			@keyframes moveBefore {
					0%, 90% {
							left: -30px;
					}
					100% {
							left: 100%;
					}
			}
			
			a:hover {
					transform: scale(1.2) rotate(-4deg);
					animation: none;
			}
			
			}
  • Вопрос задан
  • 143 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы