And by the way i checked out the site. It is dope 😍👾
Hey, thanks, I tried will-change: text-shadow; but it did not seem to make a difference tbh.
will-change: text-shadow;
I did, however, come up with the following with @keyframes which I think looks great, exactly the kind of thing I was trying to achieve.
@keyframes
.header a:hover { animation: glow 0.3s linear forwards; } @keyframes glow { 0% { text-shadow: 0 0 0px #ffffff; } 50% { color: #ffffff; text-shadow: 0 0 10px #8be9fd; } 100% { text-shadow: 0 0 0px #8be9fd; color: #8be9fd; } }
I mapped the number of animation states (3) to the timing in ms (0.3) as this seemed to have better performance. If you have 4 states, I think 0.4 may be a better time choice and so on, but I can't verify that claim it is just my subjective opinion.
New demo: michaelfasani.com
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
And by the way i checked out the site. It is dope 😍👾
Hey, thanks, I tried
will-change: text-shadow;but it did not seem to make a difference tbh.I did, however, come up with the following with
@keyframeswhich I think looks great, exactly the kind of thing I was trying to achieve.I mapped the number of animation states (3) to the timing in ms (0.3) as this seemed to have better performance. If you have 4 states, I think 0.4 may be a better time choice and so on, but I can't verify that claim it is just my subjective opinion.
New demo: michaelfasani.com