這次要來寫的是切分按鈕效果的效果
一樣把基本架構寫好

<div class="centered">
  <a class="split-btn">
    <span class="split-ani">看我把你切兩半</span>
     <span class="split-ani">看我把你切兩半</span>
  </a>
</div>

接下來設定基本的 css

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow:hidden;
}

.split-btn {
  color: #ff6565;
  font-family: "微軟正黑體";
  font-weight: bold;
  display: block;
  text-align: center;
  width: 9em;
  height: 2rem;
  cursor: pointer;
  border: #ff6565 2px solid;
  padding: 0.5em;
  overflow:hidden;
}

.split-btn span {
  position: absolute;
  width: 100%;
  left: 0;
  font-size: 1.4rem;
}

接下來針對文字設定形狀的遮罩，
讓第一組 span 隱藏下半部，第二組 span 隱藏上半部

.split-btn span:nth-of-type(1) {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); 
}

.split-btn span:nth-of-type(2) {
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

最後把動畫效果寫進來
這邊需要注意的是
在第二組 span 的動畫效果上增加 reverse來進行動畫反轉的效果
如此一來，就不需要再重新設定(連動畫都可以用同一組 非常方便！)

.split-ani{
  animation:split 2s linear infinite;
}

.split-ani:nth-of-type(2){
  animation:split 2s reverse linear infinite;
}

@keyframes split{
  0%{
    transform:translateX(100%);}
  40%{
    transform:translateX(0%);}
  80%{
    transform:translateX(0%);}
  100%{
    transform:translateX(-100%);}
}

到這邊就完成了
一樣附上本次的 codepen 如下
https://codepen.io/UHU/pen/OBerPB