css - 悬停时文本抽搐

Question

目前正在学习 CSS，这里的任务是:制作菱形按钮，在悬停时改变其方向。我做到了，但是按钮在悬停时会抽搐其文本。有没有可能解决这个问题？目前我卡住了。我试图搜索，但没有找到。

.button {
  background: green;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  transform: skew(-20deg);
  transition: 0.2s;
  padding: 12px 56px;
}

/* This is my attempt to fix it. It worked. Partially :\ */
.button > .span {
  display: block;
  transition: 0s;
  transform: skew(20deg);
}
            
.button:hover > .span {
  transform: skew(-20deg);
}
            
.button:hover {
  transform: skew(20deg);
}
            
.button-yellow {
  border: 2px solid yellow;
}

<button class="button">
  <span class="span">I shouldn't twitch on hover</span>
</button>

将不胜感激任何帮助!

Answer 1

transition文字倾斜的时间需要匹配transition按钮偏斜的时间。当我将它们都设置为 0.2s 时，它们按预期相互抵消。

.button {
  background: green;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  transform: skew(-20deg);
  transition: 0.2s;
  padding: 12px 56px;
}

/* This is my attempt to fix it. It worked. Partially :\ */
.button > .span {
  display: block;
  transition: 0.2s;
  transform: skew(20deg);
}
            
.button:hover > .span {
  transform: skew(-20deg);
}
            
.button:hover {
  transform: skew(20deg);
}
            
.button-yellow {
  border: 2px solid yellow;
}

<button class="button">
  <span class="span">I shouldn't twitch on hover</span>
</button>