Я возвращаюсь сюда в поисках вашей мудрости. Я работал над веб-сайтом, и я сделал несколько CSS, чтобы создать эффект анимации с преобразованием ширины позади некоторого текста, и он отлично работает, используя hover, но я хотел бы получить тот же эффект только с автоматической анимацией (с некоторой задержкой, которая работает со свитком), но, к сожалению, я не знаю, как.
Есть идеи?
Большое спасибо!
вот сайт:
http://231e47.com/accueil-cf/
Эффект наведения на текст «мы здесь!»
Вот мой CSS:
<style>
.highlight { display: inline-block;
color: #343434;
text-decoration: none;
position: relative;
z-index: 0;
}
.highlight::after {
position: absolute;
z-index: -1;
bottom: 10px;
left: 0%;
transform: translateX(0%);
content: '';
width: 0px;
height: 43%;
background-image: linear-gradient(120deg, #48d1de 0%, #84fab0 180%);
transition: all 250ms;
}
.highlight:hover {
color: #343434;
}
.highlight:hover::after {
height: 43%;
width: 108%;
}
</style>
СПАСИБО МНОГО!