The hover transition animation trilogy for CSS beginners

Just a few lines of CSS can make a big difference to your web page.

CSS doesn’t have to be complex to achieve special effects. Here are three examples of super simple transitions that might only be a few lines of code, but add color to a Web application.

Here is the code we will build in this tutorial

Project Settings

In this project, we will apply the transition effect to an element whose class is box. Inside this box element is text content centered vertically and horizontally. The HTML structure is fairly simple:

<div class='box'>
  <p>TEXT</p>
</div>
Copy the code

The CSS code is just as simple. We want to use a sans-serif font and make sure that the paragraph text in div is white, by doing this:

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}
Copy the code

Also, add the following CSS attributes to the box element:

.box { width:200px; /* Set the Width of box */ height:50px; /* Set the Height of box */ background:#424242; /* Dark Grey Background color */ Transition :all 0.25s ease; /* Transition settings */ display: flex; /* Use Flexbox on P */ align-items: center; /* Center P */ justify-content: center; /* Center P */ margin: 10px; /* Apply a margin around our Box */ }Copy the code
  • Whatever you have on CSSThe transitionProperties familiar or not, we are here to briefly introduce, a total of three steps. .First, we need to apply it toallProperties of change. Next, set the transition time to0.25Seconds. Finally, select the animation function asease.easeThe performance of the state is the start and end process is relatively slow, the middle transition is rapid.

holly high! Now that everything is ready, it’s time to add the transition effects. So far, the div should look like this.

1. Fading effect

First, add a faded transition. Create a new div element and add a class called fade to it:

<div class='box fade'>
  <p>FADE HERE</p>
</div>
Copy the code

All we need to do next is specify a hover rule for the fade class. We need the CSS pseudo-class selector: Hover to do this. This pseudo-class selector works for all elements and activates the CSS declaration when the element is hovering over the mouse pointer. Based on this, we change the opacity of div to 0.5 with the hover selector:

Fade: hover {opacity: 0.5; }Copy the code

Simple. The CSS declaration above specifies a hover effect for div. Here’s what it looks like so far. And you can see the transition style because we started with transition in a class called Box :all 0.25s ease; In the statement. See below, is not a good fading effect:

2. Let’s have a look

Specifying a discoloration transition actually works the same way as the discoloration transition. First, create a div element and add a class named color to it.

<div class='box color'>
  <p>COLOR HERE</p>
</div>
Copy the code

Again, we’ll use the hover selector to help us do this, but this time we’ll change the background color instead of the opacity:

.color:hover {
  background: #FF5722;
}
Copy the code

Here’s what it looks like in practice:

3. Rock together

Next, let’s create a wobble effect. This effect is a little more complicated to implement than the previous two examples. In this case, I’m going to use @Keyframes.

Keyframes – Gives you the power to control intermediate steps in a CSS animation sequence.

First, again, you’re getting tired of hearing about creating a div element without adding a class called Wiggle:

<div class='box wiggle'>
  <p>WIGGLE WIGGLE</p>
</div>
Copy the code

Next, all we need to do is create the animation with @KeyFrames. Let’s give the animation a name. Let’s call it Wiggle. And in the following code to add the implementation of jitter effect:

@keyframes wiggle { 20% { transform: translateX(4px); } 40% { transform: translateX(-4px); } 60% { transform: translateX(2px); } 80% { transform: translateX(-1px); } 100% { transform: translateX(0); }}Copy the code

As you can see from the code above, @KeyFrames gives us the ability to break down the animation into single steps and define exactly what happens at each step. Specify the progress of the animation as a percentage:

  • 20%–divMove 4px to the right relative to the initial position.
  • 40%–divMove 4px to the left relative to the initial position.
  • 60%–divMove 2px to the right relative to the initial position.
  • 80%–divMove 1px to the left from the initial position.
  • 100%–divRestore to initial position.

Now we can display wiggle’s animation with the hover selector:

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}
Copy the code

We set the animation to wiggle. You also want the animation to last 1 second, using ease.

Finally, specify that the animation fires every time the mouse pointer hovers.

Here is the final animation:

Are simple examples no longer enough for you?

The true magic of CSS will surprise you. If you’re really interested in it, go to the right: Master CSS — Learn CSS3, CSS4, Flexbox, Animations, Grids, Frameworks, and More!!

Oh oh almost forgot, take a look at browser compatibility…

Look! The level of support is not bad! However, it is important to consider compatibility with older browsers, and don’t forget to add prefixes. The following table shows the support for animation properties and prefixed animation properties by major browsers:

Browser support for animation. Source W3Schools

For those of you who haven’t been exposed to prefixes, they were an experimental property that some browsers implemented before the CSS standard. With prefixes, you can ensure that the animation property is experienced in some older browsers. It’s also a good habit to always use prefixes when writing CSS animations. To maximize browser support for the wiggle code we implemented above, the code could be modified as follows:

@-webkit-keyframes wiggle { 20% { -webkit-transform: translateX(4px); transform: translateX(4px); } 40% { -webkit-transform: translateX(-4px); transform: translateX(-4px); } 60% { -webkit-transform: translateX(2px); transform: translateX(2px); } 80% { -webkit-transform: translateX(-1px); transform: translateX(-1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes wiggle { 20% { -webkit-transform: translateX(4px); transform: translateX(4px); } 40% { -webkit-transform: translateX(-4px); transform: translateX(-4px); } 60% { -webkit-transform: translateX(2px); transform: translateX(2px); } 80% { -webkit-transform: translateX(-1px); transform: translateX(-1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); }}Copy the code

Don’t forget to prefix :hover too:

.wiggle:hover {
 -webkit-animation: swing 1s ease; animation: wiggle 1s ease;

 -webkit-animation-iteration-count: 1; animation-iteration-count: 1;
}
Copy the code

As you can see, prefixed properties are no different from any other CSS property declaration. The only difference is that they require a -webkit- at the beginning.

Want to see the effect in CodePen?

There is nothing wrong with an old iron. As you might expect, you can see all the code, buttons, and animations below.