Use CSS to complete a hover transition animation project (super simple)

CSS does not have to be complex to achieve special effects. Here are three examples of super simple transitions that may only be a few lines of code, but add a lot to your 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 with class box. Inside this box element is vertically and horizontally centered text content. The HTML structure is pretty simple:

<div class=&#39;box&#39;>
  <p>TEXT</p>
</div>

The CSS code is just as simple. We want to use a sans-serif font and ensure that the paragraph text in the div is white. This can be achieved with the following code:

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

In addition, 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 */
}

Whether you are familiar with the transition properties of CSS or not, we will briefly introduce it here, divided into three steps. .First step, we need to apply it to all changed properties. Next, set the transition duration to 0.25 seconds. Finally, select the animation function as ease. The performance state of ease is that the starting and ending process is relatively slow, and the transition in the middle is rapid.

holly high! Now that the preparations are in place, the next step is to add the transition effect. So far, the div should look like this.

1. Fade effect

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

<div class=&#39;box fade&#39;>
  <p>FADE HERE</p>
</div>

The next thing we need to do is specify the hover rules for this fade class. We need to use the CSS pseudo-class selector:hover to accomplish this. This pseudo-selector is valid for all elements and activates the CSS declaration when the element is hovered over. Based on this, we use the :hover selector to change the transparency of the div to 0.5:

.fade:hover {
  opacity: 0.5;
}

Simple. The above CSS statement specifies a hover effect for the div. Here's how it currently looks. The reason why you can see the transition style is because we initially used the declaration transition:all 0.25s ease; in the class named box. Look below, is it a pretty good fading effect:

2. Let’s take a look at the color

Specify a color transition In fact, it is similar to the process of fading transition. First, create a div element and add a class called color to it.

<div class=&#39;box color&#39;>
  <p>COLOR HERE</p>
</div>

Similarly, we also need to use the :hover selector to help us accomplish this, but this time we do not change the transparency but the background color:

.color:hover {
  background: #FF5722;
}

The following is the actual effect :

3. Swing together

Next, to achieve a swinging effect. This effect is slightly more complex to implement than the previous two examples. In this example, I'll use @keyframes.

@keyframes - Gives you the magic of controlling intermediate steps in a CSS animation sequence.

The first thing is still the same, you must be tired of hearing this, create a div element and add a class called wiggle to it:

<div class=&#39;box wiggle&#39;>
  <p>WIGGLE WIGGLE</p>
</div>

Next, what we have to do is to use @ keyframes to create animations. Let’s give the animation a name first, let’s call it wiggle. And add the implementation of the jitter effect in the following code:

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

As can be seen from the above code, @keyframes gives us the ability to break down the animation into single steps and accurately define what happens at each step. Specify the progress of the animation by percentage:

20% - the div moves 4px to the right relative to its initial position.

40%——The div is moved 4px to the left relative to its initial position.

60%——The div is moved 2px to the right relative to its initial position.

80%——The div is moved 1px to the left relative to its initial position.

100%——The div is restored to its original position.

Now we can use the :hover selector to display the wiggle animation:

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

We set the animation to wiggle. At the same time, we want the animation to last for 1 second and use the ease animation effect.

Finally, specify the animation to trigger every time the mouse pointer hovers.

The picture below is the final animation effect:

The above is the detailed content of Use CSS to complete a hover transition animation project (super simple). For more information, please follow other related articles on the PHP Chinese website!