2 Easy CSS Transitions You Should Try

Nov 10, 2015

For all of you aspiring Front-End Developers, here's a little tip for you. CSS is extremely important. If you're reading this you probably already know that, and if you do just think of this as a reminder. CSS has come a long way in the past few years. There was a time when it took complicated JavaScript code to do any transitions on a website, but those days are over. I'm going to show you 2 easy, simple, useful CSS transition techniques that you should try in your applications to add more interest for your readers. 

Slide Over

This is a nice hover effect to use. Basically, once a user's cursor hovers over the element it slides a few pixles to the side. If you'd like to see an example, check out this [codepen].

The first thing you'll want to do is set up the HTML elements you're going to be using. In this case we'll be using list elements. Here's the HTML:

<ul>
  <li>The first line that will slide left on hover</li><br>
  <li>The first line that will slide left on hover</li><br>
  <li>The first line that will slide left on hover</li>
</ul>

Next, you'll want to set up the CSS:

ul { /* This just removes padding/bullets and moves the ul 20px away from the left edge */
  padding-left: 0;
  margin-left: 20px;
  list-style: none;
}

ul li {
  display: inline-block; /* This is why the br tags are needed in the HTML */
  transition: .5s; /* This is why the text slides over instead of jumping over */
}

ul li:hover {
  margin-left: 15px; /* This is what makes it move left 10px on hover */
}

If you looked at the Codepen, there are a few more styles to make things look better, but I'll leave that up to you. The end result is a nice looking hover effect that can be used in a variety of situations.

Darkening Links

Something I like to do is set my links to a light color, then on hover I like for them to darken. It's a visually pleasing way to let someone know that the text they're hovering over will take them somewhere else. I like to use this technique a lot for my navigation links. The reason I like it so much is again because of how nice it looks. I like for the color to slowly darken instead of instantly changing to a darker color. This technique can also be used with the background or the border. In this [codepen] example I'm changing the font color and the border color. 

To start this it's pretty much the same as the last:

<ul>
  <li>Home</li>
  <li>Blog</li>
  <li>Projects</li>
  <li>Contact</li>
</ul>

Then comes the CSS to make this work:

ul {
  list-style: none;
  padding-left: 0;
  margin-left: 30px;
}

ul li {
  transition: 1s; /* This makes the values change more gradually */

  /* Just styling */
  display: inline-block;
  padding: 7px 10px;
  background: white;
  border: 1px solid #aaa;
  color: #aaa;
}

ul li:hover { /* These are the values that change on hover */
  color: black;
  border-color: black;
}

How easy was that?

With these 2 simple, yet powerful CSS transition tricks you can easily add a little more interest to your websites. Don't just take my word for it, try them out you yourself. Experiment with the colors, fonts, backgrounds and any other properties you think you might have fun with. Odds are you'll end up finding something you love.