你可能不知道的一个transition动画小技巧

一图泯恩仇，没错，老规矩，先上图。Look down↓↓↓

hover-transition.gif

这是一个鼠标hover的效果，关键是文字上下方的效果。来，一分钟想一想怎么实现？
伪元素::before和::after ?
肯定的撒! 关键就是从左至右和从右至左的过渡。
先来实现从左至右的css代码:

hover-transition.png

到此呢，效果是酱紫的:

hover-transition2.gif

ちょっと待って ! 等等 ! 这是什么鬼 ? ::before已经按照我们的想法正确展示了，::after就有点……
好吧，加个左定位再看看—.—

hover-transition2.png hover-transition3.gif

啊哈，已经很接近了有木有! 那么，见证奇迹的时候要到了，请修改一行代码，look down↓↓↓

hover-transition3.png

然后刷新下浏览器。

O(∩_∩)O哈 ! 效果出来了有木有 ! 很神奇有木有 !

这就是定位的一个小技巧，它决定了渲染时的方向性，同理，垂直方向也是如此，感兴趣的童鞋们可以试一试垂直方向的动画，小编在此就不上代码了，毕竟任何东西自己做一遍才能加深理解嘛，我们是代码创造者，不是代码搬运工。

OK, See you next time~