An Example Code for Implementing Underlines in Transition of CSS3

Time:2019-9-5

This article introduces the example code of CSS3 transition for underlining, and shares it with you as follows:

Let’s look at our demo first.

Understanding transition

This is a new style in CSS3, which can realize the excessive animation. Usually when adding an effect can be changed from one style to another.

Transition attribute

  1. Transition: Abbreviated property, used to set four transition properties in one property.
  2. Transit-property: specifies the name of the CSS attribute that applies the transition.
  3. Transit-duration: Defines the time spent on transitional effects. The default is 0.
  4. Transition-timing-function: A time curve that specifies the transition effect. The default is ease.
    1. Line: Provides the transition effect from start to end at the same speed (equal to cubic-bezier (0,0,1,1))
    2. Ease: the transition effect of starting slowly, then speeding up, and then ending slowly (cubic-bezier (0.25, 0.1, 0.25, 1))
    3. Ease-in: specifies the transition effect starting at a slow speed (equal to cubic-bezier (0.42, 0, 1, 1))
    4. Ease-out: Provides a slow end to the transition effect (equal to cubic-bezier (0,0,0.58,1))
    5. Ease-in-out: Provides a transition effect starting and ending at a slow rate (equal to cubic-bezier (0.42, 0, 0.58, 1))
    6. Cubic-bezier (n, n, n, n): Define your own values in the cubic-bezier function. Possible values are between 0 and 1.
  5. Transition-delay: specifies when the transition effect will begin. The default is 0.

Transition: width 1s linear 2s; /* abbreviated example*/

/* Equivalent to the following*/
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

Tranform attribute

  • Translate () moves from the current element position according to the parameters given by the left (X axis) and top (Y axis) positions.
  • Rotate () an element that rotates clockwise at a given degree. Negative values are allowed, so the elements rotate counterclockwise.
  • Scal () The size of the element increases or decreases depending on the parameters of width (X axis) and height (Y axis):
  • Skew () contains two parameter values, representing the inclination angles of the X and Y axes, respectively. If the second parameter is empty, the default is 0, and the parameter is negative to indicate the inclination in the opposite direction.
  • The matrix () matrix method has six parameters, including rotation, zooming, translation and tilting.

Achieving the desired results

Of course, this is where the code is released directly, and there are comments in the code that are easy to understand.

/* CSS code*/

h2{
    position: relative;
    padding: 15px;
    text-align: center;    
}
button{
    width: 100px;
    height: 40px;
    border-radius: 15px;
    border: none;
    background: #188FF7;
    color: #fff;
    outline: none;
    cursor: pointer;
    font-weight: bold;
}
button:hover{
    background: #188EA7;
}
.container{
    width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    
}
.line{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transition: transform .5s;
    background: #188EA7;
    color: #188EA7;
    transform: scaleX(0);
    z-index: 1111;            
}

@keyframes changeColor1{
    from{
        color: #000;
    }
    to{
        color: #188EA7;
    }
}
@keyframes changeColor2{
    from{                
        color: #188EA7;
    }
    to{
        color: #000;
    }
}
<! - HTML code - >

<div class="container">
    <h2 id="title">
        Baidu Front-end College
        <i class="line" id="line"></i>
    </h2>
    <button id="change">Change</button>
</div>
// JS partial code

(function () {
    let btn = document.getElementById('change');
    let h2 = document.getElementById('title');
    let line = document.getElementById('line');
    let count = 0;
    btn.onclick = function () {
        if(count%2===0){
            line.style.transform = "scaleX(1)";
            h2.style.animation = "changeColor1 1s";
            h2.style.color = "#188EA7";
            count++;
        }else{
            line.style.transform = "scaleX(0)";
            h2.style.animation = "changeColor2 1s";
            h2.style.color = "#000";
            count++;
        }
        
    }
})();

summary

At this point, we have fully rendered this effect, and we have also learned the transition and tranform attributes in CSS3. Of course, there are still some HTML and CSS foundations to complete this animation.

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.