CSS实现导航下划线hover动画transform汇总

对于一个 hover transition 动画，它应该是从：
正常状态 -> hover状态 -> 正常状态 （三个步骤，两种状态）
所以，必须要有一种方法，能够使得 hover 动画的进入与离开产生两种不一样的效果，实现：
状态1 -> hover状态 -> 状态2 （三个步骤，三种状态）
html:

<div>Hover Me</div>

css:

body {
    padding: 50px;
}

div {
    position: absolute;
    width: 200px;
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    cursor: pointer;
    color: #333;
    text-align: center;
    margin: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: color .5s;
}

div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: blue;
    z-index: -1;
    transition: width .5s;
}

div:hover::before {
    width: 200px;
}

效果图：

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

body {
    padding: 50px;
}

div {
    position: absolute;
    width: 200px;
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    cursor: pointer;
    color: #333;
    text-align: center;
    transition: color .5s;
    margin: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div::before {
    content: "";
    position: absolute;
    left: 0%;
    bottom: 0;
    width: 200px;
    transform: scaleX(0);
    height: 2px;
    background: deeppink;
    z-index: -1;
    transition: all .5s;
}

div:hover::before {
    transform: scaleX(1);
}

transform: scale() 配合 transform-origin ，我们可以开始随意改变动画的初始与结束状态了。把他们运用到其他效果之上，简单的几个示意效果：

html:

<div>Hover Me</div>

<div class="two">Hover Me</div>

<div class="three">Hover Me</div>

css:

body {
    padding: 30px;
}

div {
    position: relative;
    width: 200px;
    height: 60px;
    line-height: 60px;
    font-size: 32px;
    cursor: pointer;
    color: #333;
    text-align: center;
    transition: color .5s;
    margin: 10px;
}

div::before {
    content: "";
    position: absolute;
    left: 0;
    width: 200px;
    height: 60px;
    background: deeppink;
    z-index: -1;
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform .5s;
}

div:hover {
    color: #fff;
    
    &::before {
        transform: scale3d(1, 1, 1);
        transform-origin: 0% 50%;
        transition-timing-function: ease-in;
    }
}


.two::before {
    transform: scale3d(0, 0, 1);
    transform-origin: 100% 100%;
}

.two:hover {
    color: #fff;
    
    &::before {
        transform: scale3d(1, 1, 1);
        transform-origin: 0% 0%;
    }
}

.three::before {
    transform: scale3d(0, 0, 1);
    transform-origin: 50% 100%;
}

.three:hover {
    color: #fff;
    
    &::before {
        transform: scale3d(1, 1, 1);
        transform-origin: 50% 0%;
    }
}

参考网址：https://codepen.io/Chokcoco/pen/ELxmwE