妙用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 ，讓動畫的進入與離開產生了兩種不同的效果，兩個不同的方向。