鼠标移到某个地方时，从左向右划出一条线的动画

Posted 2020-10-06 Candy-Yao

.line {
    border-bottom: 2px solid #E40012;
    width:0px;
    display: inline-block;
    height: 2px;
    margin-bottom: 6px;
}
.animation-box:hover .line {
    animation: test 0.5s linear;
    animation-fill-mode :forwards;
}
@-webkit-keyframes test {
    0%{
        width: 5px;
    }

    20%{
        width: 10px;
    }

    40%{
        width: 15px;
    }

    60%{
        width: 20px;
    }

    80%{
        width: 25px;
    }

    100%{
        width: 30px;
    }
}