Skip to content
← Back to Community
Super Satisfying HTMLAnchorElement!
Profile icon
AmoghTheCool

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
Profile icon
cuber1515
Profile icon
AmoghTheCool
Comments
hotnewtop
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