transform-originの設定で動きを変える

リンクボタンのホバーモーションで、背景が走るタイプのパターンをtransform-originの設定の違いで比較。

▼設定なし
リンクボタン　motion01

▼左から現れて左に消えていく
リンクボタン　motion02

▼左から右に抜けていく
リンクボタン　motion03

　
<a class="test-motion-btn motion01" href="/">リンクボタン　motion01</a>

<a class="test-motion-btn motion02" href="/">リンクボタン　motion02</a>

<a class="test-motion-btn motion03" href="/">リンクボタン　motion03</a>
　

.test-motion-btn{
  overflow: hidden;
  transition: color .3s ease;

 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 100px;
 border: 1px #004DA1 solid;
 width: 100%;
 max-width: 313px;
 height: 63px;
 margin: 0 auto;
 color: #004DA1;
}
.test-motion-btn:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #004DA1;
  transform: scaleX(0);
  transition: all .3s ease;
  transition-property: transform;
  z-index: -1;
}
.test-motion-btn:hover{
  opacity: 1;
  color: #fff;
}
.test-motion-btn:hover:before{
  transform: scaleX(1);
}
/*motion02*/
.test-motion-btn.motion02:before{
  transform-origin: left;
}
/*motion03*/
.test-motion-btn.motion03:before{
  transform-origin: right;
}
.test-motion-btn.motion03:hover:before{
  transform-origin: left;
}