Hover animation

I'm trying to achieve the hover animation of color which is on the hero page. https://www.ellenasm.com/
<div class="wrapper">
<span class="char">P</span>
<span class="char">R</span>
<span class="char">O</span>
<span class="char">D</span>
<span class="char">U</span>
<span class="char">C</span>
<span class="char">T</span>
</div>
<div class="wrapper">
<span class="char">P</span>
<span class="char">R</span>
<span class="char">O</span>
<span class="char">D</span>
<span class="char">U</span>
<span class="char">C</span>
<span class="char">T</span>
</div>
.char{
font-size: 4rem;
}
.char:hover{
color: #f889b8;
transition: color 2s;
}
.char{
font-size: 4rem;
}
.char:hover{
color: #f889b8;
transition: color 2s;
}
it's going from dark to the given colour, how should i change that.
ellenasmco
Elena Smirnova
Home
5 Replies
Wolle
Wolle2y ago
And your Problem is? That site you linked is a giant pile of animations and transitions. Try to describe what you want and how it differs from what you have, then somebody can help you.
Jochem
Jochem2y ago
You have to specify separate times for the in and out transition:
.char{
font-size: 4rem;
transition: color 2s;
}
.char:hover{
color: #f889b8;
transition: color 0s; /* Improved from Mark's answer, didn't realize 0s would work for some reason */
}
.char{
font-size: 4rem;
transition: color 2s;
}
.char:hover{
color: #f889b8;
transition: color 0s; /* Improved from Mark's answer, didn't realize 0s would work for some reason */
}
you have to sit through the painful opening animation with low contrast, and then a big block of text appears where the letters light up when you hover over them and slowly fade back out
MarkBoots
MarkBoots2y ago
In this case the color transition on hover is (almost) immediate (0s) and the transition duration kicks in when the hover state is removed. so the normal state has the duration 2s something like this
/* I just noticed jochem said exactly the same, so removed the duplicate */
/* I just noticed jochem said exactly the same, so removed the duplicate */
Wolle
Wolle2y ago
With ctrl+shift+c you can activate the devtools and element picker, then you can check the element in the devtools (and use the filter):
Abdul Ahad⚡
Abdul Ahad⚡2y ago
understood. the key thing i missed was the animation starts after the hover event is done. i was checking only the hover state. didn't check the default state 😄 . thanks for the tip. thank you guys.
Want results from more Discord servers?
Add your server