妙用transform-origin，控制动画方向

一、需求

将下面这个动画的下划线效果，从左进入，右边离开修改为从上方进入，下方离开，需纯CSS实现。

二、还原效果

正常而言，我们一个 hover 效果，可能就是从哪里来，回哪里去，大部分的应该是这样的：

CodePen Demo -- 从哪里来，回哪里去

现在，难点就在于如何在 hover 离开的时候，改变动画行进的方向。

下面我们将一个 hover 动画分解为 3 个部分：

hover 进入状态
hover 停留状态
hover 离开状态

但是，对于一个 hover 效果而言，正常来说，只有初始状态，和hover状态两种。

对于一个 hover transition 动画，它应该是从：

正常状态 -> hover状态 -> 正常状态（三个步骤，两种状态）

所以，必须要有一种方法，能够使得 hover 动画的进入与离开产生两种不一样的效果，实现：

状态1 -> hover状态 -> 状态2 （三个步骤，三种状态）

实现控制动画方向的关键点

使得 hover 动画的进入与离开产生两种不一样的效果 ：关键所在，使用 transform: scale() 以及 transform-origin 实现这个效果。

transform: scale() 实现线条运动

使用 transform: scaleX(0) 与 transform: scaleX(1) 来改变线条的显示与隐藏，它的 CSS 代码简单来看，可能是这样：

div {
    position: absolute;
    width: 200px;
    height: 60px;
}

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

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

CodePen Demo -- transform: scaleX(0) 与 transform: scaleX(1)

为什么是要用 transform: scale() 来实现线条的动画？
- 因为它可以配合 transform-origin 实现动画的不同运动方向：

transform-origin 实现线条运动方向

transform-origin 让我们可以更改一个元素变形（transform）的原点。

重点：使用 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向。

我们给线条设置一个默认的 transform-origin 记为状态1
hover 的时候，设置另外一个不同的 transform-origin, 记为状态2

所以，当然我们 hover 的时候，会读取状态2的transform-origin，从该原点开始放大至 scaleX(1)，hover 离开的时候，会读取状态1的transform-origin，从scaleX(1)状态缩小至该原点。

CSS代码大概是这样：

div {
    position: absolute;
    width: 200px;
    height: 60px;
}

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

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

这里，我们通过 hover 状态施加了一层新的 transform-origin ，让动画的进入与离开产生了两种不同的效果，两个不同的方向。