Menu
I want to change the color of each letter in one word when mouse over happens.
I use transition for doing this but I want this change to happen smoothly from left to right but I don't know why the ease-in timing function does not work. I want to change the color of my letters in such a way that div element moves.
The first one in this site is what I want: http://tympanus.net/Development/TextStylesHoverEffects/
<style>
p {
transition: all 0.5s ease-in;
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
animation-timing-function: linear;
}
.a:hover{
color: cyan;
}
@-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
<body>
<p class="a">HelloGolnaz</p>
<div></div>
</body>
Sorry if this is a simple question and thank you.
324
asked Oct 14 '25 16:10
You can use two divs one over another to create such effect:
.default,
.hover {
font-size: 18px;
font-weight: bold;
color: #787878;
}
.hover {
overflow: hidden;
width: 0;
position: absolute;
left: 0;
top: 0;
color: #050;
transition: width .5s ease-in-out;
white-space: nowrap;
}
.wrapper {
position: relative;
}
.wrapper:hover .hover {
width: 100%;
}<div class="wrapper">
<div class="default">SOME WORD HERE</div>
<div class="hover">SOME WORD HERE</div>
</div>First I want to say that @justinas's answer is a correct answer but I just wanted to modify his answer a bit to make use of the steps() function in CSS animation instead of CSS transition, so that it looks like it is being filled letter by letter.
Note that to simulate it the number of steps should be same as the number of letters
jsFiddle
.default,
.hover {
font-size: 18px;
font-weight: bold;
color: #787878;
cursor:pointer;
}
.hover {
overflow: hidden;
width: 0;
position: absolute;
left: 0;
top: 0;
color: navy;
white-space: nowrap;
}
.wrapper {
position: relative;
display: inline-block;
}
.wrapper:hover .hover {
width: 100%;
animation: stagger 2s steps(14);
}
@keyframes stagger {
from {width: 0;}
to {width: 100%;}
}<div class="wrapper">
<div class="default">SOME WORD HERE</div>
<div class="hover">SOME WORD HERE</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
