Animation after transition on hover?

Ссылка скопирована
CSS HTML PHP
7 марта 2026 1 ответ

здарвствуйте, мне нужно что б при наведении кубик плавно появился и когда он появится - анимировался
тоесть animation после transition

<!DOCTYPE html> <html> <head> <style>  div {   width: 100px;   height: 100px;   background: red;   position: relative;   opacity:0;      animation-delay: 2s;   transition: opacity 2s; } div:hover{   animation: mymove 5s infinite;   opacity:1; }  @keyframes mymove {   from {left: 0px;}   to {left: 200px;} } </style> </head> <body>  <h1>The animation-delay Property</h1>  <p>Start the animation after 2 seconds:</p> <div></div>  </body> </html>

<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; position: relative; opacity:0; animation-delay: 2s; transition: opacity 2s; } div:hover{ animation: mymove 5s infinite; opacity:1; } @keyframes mymove { from {left: 0px;} to {left: 200px;} } </style> </head> <body> <h1>The animation-delay Property</h1> <p>Start the animation after 2 seconds:</p> <div></div> </body> </html>

Дополнительно:

Для более продвинутых вещей лучше использовать инструментарий, например GSAP. Конечно средствами CSS и JS это сделать можно, вопрос в том - насколько нужно?

animation объединяет кучу свойств, в том числе и animation-delay

animation сбрасывает animation-delay в значение по-умолчанию — 0.

:root {   --transition-duration: 2s;   --animation-duration: 5s; }  div {   width: 100px;   height: 100px;   background: red;   opacity: 0;   transition: opacity var(--transition-duration);   will-change: transform, opacity; } div:hover {   animation: mymove var(--animation-duration) var(--transition-duration)     infinite;   opacity: 1; }  @keyframes mymove {   to {     transform: translateX(200px);   } }

:root { --transition-duration: 2s; --animation-duration: 5s; } div { width: 100px; height: 100px; background: red; opacity: 0; transition: opacity var(--transition-duration); will-change: transform, opacity; } div:hover { animation: mymove var(--animation-duration) var(--transition-duration) infinite; opacity: 1; } @keyframes mymove { to { transform: translateX(200px); } }

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Андрей PHP Ответ

To achieve an animation after a transition on hover, you can use CSS keyframe animations along with the transition property. Here's an example using PHP within the 

 tags:


```html


    .box {

        width: 100px;

        height: 100px;

        background-color: red;

        transition: background-color 0.5s;

    }


    .box:hover {

        background-color: blue;

        animation: animate 1s;

    }


    @keyframes animate {

        0% {

            transform: scale(1);

        }

        50% {

            transform: scale(1.2);

        }

        100% {

            transform: scale(1);

        }

    }




```


In this example, we have a box element with a red background color. When you hover over the box, the background color transitions to blue and an animation is triggered. The keyframe animation scales the box up by 20% and then back to its original size.


You can adjust the animation duration, timing function, and keyframe percentages to achieve the desired effect. Experiment with different properties to create unique and eye-catching animations on hover after a transition.
Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов 1С Как выдать дефолтному пользователю 1С 8.3 право на загрузку XML? 0 ответов