Super Satisfying HTMLAnchorElement!

A super satisfying HTMLAnchorElement (more commonly known by [ in HTML and a in CSS). The first time I used @keyframes in CSS, and I've found it makes for really good transitions. It, for one, is much smoother than a sudden :hover {background-color:black} Made for a project that is not on Replit (edited w/VS Code and stored locally). However you can use it for your own projects, just change the color and background-color attributes in the CSS @keyframe.
]Read more here.
100% CSS and HTML (no JS). See fullscreen here.

Also @xfinnbar I prefer @keyframes to color ease 0.5 actually, it

is much easier to understand (for me)
gives me more control

Voters

Comments

hot new top

Profile icon

xfinnbar

Don't use @keyframes for hover effects in CSS. Use transition instead. It's much easier and quicker:

a {
  color: black;
  transition: color ease 0.3s;
}

a:hover {
  color: orange;
}

Profile icon

RixTheTyrunt

Can you show demo? I don't understand those transition things!

Profile icon

xfinnbar

@RixTheTyrunt
transition: color ease 0.3s;
breakdown:

transition: the property name
color: the property you want to transition
ease: the curve (ease is smoother, linear is a straight line)
0.3s: the time (0.3 seconds or 300 miliseconds)

Then, when you change the color property, it will smoothly transition between the original and the new color. This also works both ways, so the button will smoothly go back to its original color when you stop hovering it.

Profile icon

RixTheTyrunt

Well, now I understand those things, I don't need help! ;D