Magical use of scale and transfrom-origin to precisely control the animation direction

After the last   article about the incredible pure CSS navigation bar underline follow effect , many friends approached me to discuss and exclaimed the wonder of CSS.

Then yesterday, a friend in the group asked about an effect similar to this one, and asked how

Modify the underline effect of the animation below to enter from the left and leave from the right to enter from the top and leave from the bottom.

The description is hard to understand, look at the original effect:

The difficulty

When I saw this effect for the first time, my heart didn't waver. I thought it was just a simple underline hover effect. After being reminded by a friend, I found out that in this animation effect, the underline enters from one end and leaves from the other end. Also, this hover animation is implemented in pure CSS.

Without considering the modification requirements mentioned above, think about it first. If you want to restore the above effect and only use CSS, how to do it?

 

Restoration effect

Well, normally, our hover effect may be where it comes from and where it goes back, most of which should be like this:

Now, the difficulty is how to change the direction of the animation when the hover leaves.

Below we decompose a hover animation into 3 parts:

1. hover enters the state
2. hover hover state
3. hover leave state

However, for a hover effect, normally, there are only the initial state and the hover state. Maybe our code looks like this:

div {
    xxxx...
}

div:hover {
    xxxx...
}

For a hover transition animation, it should be from:

• Normal state -> hover state -> normal state (three steps, two states)

Therefore, there must be a way to make the entry and exit of the hover animation have two different effects, to achieve:

• state 1 -> hover state -> state 2 (three steps, three states)

 

Implementing keys that control the direction of the animation

So, the key point here is (emphasis added):

It makes the entry and exit of the hover animation have two different effects.

接下来，也就是本文的关键所在，使用 transform: scale() 以及 transform-origin 实现这个效果。

 

transform: scale() 实现线条运动

transform: scale 大家应该都很熟悉了，通俗来说是用于缩放，用官方的话说，就是：

CSS 函数 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);
}

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

 

transform-origin 实现线条运动方向

transform-origin 让我们可以更改一个元素变形（transform）的原点，transform-origin 属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。

本效果最最最重要的地方就在于这里，我们使用 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向。

1. 我们给线条设置一个默认的 transform-origin 记为状态1
2. 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 ，让动画的进入与离开产生了两种不同的效果，两个不同的方向。

如此一来，也就顺利实现了我们想要的效果，撒花：

注意，这里使用了 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向，而没有借助诸如 position 位移，transform: translate()，或者 margin 等位置属性去改变线条所在的位置。

所以，有趣的是，线条其实没有产生过任何位移，这里其实也是障眼法，让它看上去，它好像在移动。 

 

拓展延伸

Well, with the above method, that is,  transform: scale() cooperation  transform-origin , we can start to change the initial and end states of the animation at will. Apply them to other effects, a few simple effects:

 

Notable points

There are a few more interesting points, you can try and think about it:

• Try changing the  transition-timing-function easing function of the two states to make the animation smoother and more beautiful;
• Note that the line  transition setting is  transition: transform .5s not  transition: all .5s, and experience the different effects produced by the two writing methods.

 

finally

I personally saw this method first in the  hover effect of the Css menu . If you have a better method, welcome to discuss it together.

More wonderful CSS technical articles are summarized in my  Github -- iCSS  , which will be updated continuously. Welcome to click star to subscribe to the collection.

Well, this is the end of this article, I hope it helps you :)

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.