Как создать плавный эффект анимации для изображения при наведении и убирании курсора мыши?

Question

Разиль

javascript , css , фронтенд

Как создать плавный эффект анимации для изображения при наведении и убирании курсора мыши?

Как можно сделать анимацию изображения плавной при наведении мыши на кнопку и возвратить изображение обратно плавно при убирании курсора? В данный момент реализация приводит к резкому возвращению изображения в исходное положение при убирании курсора. Код для примера доступен по ссылке: [ссылка]. Буду благодарен за помощь в решении данной проблемы.

1 мая 2024 г. 14:10

Ответы на вопрос 3

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

Answer 1

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

Пример кода с использованием transition:

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Image Animation</title>
    <style>
        .image-container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .image-container img {
            width: 100%;
            height: auto;
            transition: transform 0.3s;
        }

        .image-container:hover img {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div class="image-container">
        <img src="image.jpg" alt="Image">
    </div>
</body>

</html>
```

Пример кода с использованием анимации:

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Image Animation</title>
    <style>
        @keyframes zoomIn {
            from {
                transform: scale(1);
            }
            to {
                transform: scale(1.1);
            }
        }

        .image-container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .image-container img {
            width: 100%;
            height: auto;
            animation: zoomIn 0.3s forwards;
        }

        .image-container:hover img {
            animation: none;
        }
    </style>
</head>

<body>
    <div class="image-container">
        <img src="image.jpg" alt="Image">
    </div>
</body>

</html>
```

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

Answer 2

не нужен тут animation, просто  транзишон укажи и трансформ на ховер сделай

Answer 3

Убрать классы hand-* (и, соответственно, js-код, который эти классы переключает), убрать keyframes. 
 
 Задать элементу с изображением длительность смены состояния: 
 
 .btn::after {
  transition-duration: 1s;
  ...
}
 
 Указать, как должно измениться состояние при наведении курсора: 
 
 .btn:hover::after {
  transform: translateX(30px) translateY(-40px);
}
 
 Всё.