CSS Hyperlink Animation

# Intro

Hey everybody!

I'm wanted to show everyone a pretty neat CSS trick that I picked up while writing out some code earlier today. I found myself wanting to write some animations for my portfolio project. For this particular animation I didn't need any JS logic and my CSS skills are not quite where I would like them to be. This led me to wanting a CSS animation, and from what I had read transforms and translates are the most performant animations that had the widest browser support. I'll give you a brief description of my particular use case, the idea of what I wanted to do, and then what the actual code was that got me there.

# The Use Case

Enough talking about this as some ephemeral entity. I had a navbar that I wanted to add hover animations to. A bit of pop that adds a hint of elbow-grease that you like to see in a website, and makes you feel like you aren't looking at someone's 2006 myspace page.

This is what it looks like currently:

I wanted my text to change to orange whenever you hovered over the link, and for it to "slide" over the text as you hovered.

Here's a sneak peak of what it'll look like when we're done

Enough with what it looks like, lets move on to the fun stuff!

#The HTML

So really all we're doing here is putting what I envision as a "ghost" span between the anchor tags. So it'll look something like this.

<a><span></span>About</a>

What we will do is when the anchor tags are hovered over, the "ghost" span will slide in over it with the new color.

We will need to add some HTML attributes to get it there however, so let me break that down really quick.

We're Going to want to add alt tags on our <a> tags for accessibility reasons. In same name of a11y we are also going to add
aria-hidden="true" to our span tags so that screen readers don't read the link value twice. The last thing we're going to add is also to our span, and that is the data-content attribute.

This attribute lets us add the "ghost" portion that I was talking about, as we don't need to actually assign the span tags a value, only the data-content. We are going to push the span tags together without putting a value between them.

After adding all of that you should end up with something like this:

<a alt='link to about page' href='/about'><span data-content='About' aria-hidden='true'></span>About</a>

This is our final HTML piece, the only thing left to do is some CSS to make the magic happen.

#The CSS

So first things first we are going to be putting an orange span smack-dab on top of our anchor tag, and that could be a problem for us. Let's take care of that.

span{
position: absolute;
overflow: hidden;
transform: translateX(-100%);
transition: transform 275ms ease;
}

So we want it absolutely positioned so we don't displace the rest of our wonderful page. Afterwards we want the overflow hidden because if we don't, we are going to see the entire word sliding form the left as if we were pushing out some play-doh, and that just was not the look I was going for. The next two lines are the fun ones as you can tinker with these a bit to git a different animation if you would like. My goal was to have the color slide in from the left. transform: translateX(-100%)
I also wanted it to be a pretty smooth and quick animation.
transition: transform 275ms ease;

Having understood and broken down that bit of CSS you will hopefully be familiar with the rest. I will link a code-pen with the rest of the code so you can play with it and maybe use it yourself!

I am quickly falling in love with animation, and actually finding out CSS doesn't have to be so awful has been a very freeing realization. I definitely learned a bit of CSS today, and I hope this post brought you something as well!