CSS 按钮悬停动画是如何工作的？

Question

我正在尝试理解这些按钮悬停效果的代码块，但仍然感到困惑。

我可以理解，当鼠标悬停在按钮上时，.btn:hover::after 会启动并显示背景（z=-1）按钮，然后用transform: scaleX(1.4) scaleY(1.6); 展开它

但是当鼠标指针从按钮上移开时，背景按钮也会“缩小”效果，就像从transform: scaleX(1.4) scaleY(1.6); 到正常大小一样。我只是不明白哪一行代码控制了这个鼠标离开动画。

.btn:link,
.btn:visited {
  position: relative;
  border-radius: 10rem;
  display: inline-block;
  margin-top: 6rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  transition: all 0.2s;

}

.btn:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2rem  rgba(0, 0, 0, .3);
}

.btn:active {
  transform: translateY(-.1rem);
  box-shadow: 0 .5rem 1rem  rgba(0, 0, 0, .2);
}

.btn--white {

  background-color: #fff;
  color: #777;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.btn--white::after {
  background-color: #fff;
}

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

Answer 1

秘密在于按钮的:link/:visited中的transition: all 0.2s。 transition 不仅进入目标状态，而且离开目标状态。从本质上讲，transition 控制着您所看到的动画的两侧。

仍然是 transform 应用实际偏移量，但 transition 负责平滑地来回淡出是否应用 transform - 没有 transition ，动画只会在两种状态之间“跳跃”。

body {
  background: black;
}

.btn:link,
.btn:visited {
  position: relative;
  border-radius: 10rem;
  display: inline-block;
  margin-top: 6rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  transition: all 0.2s;
}

.btn:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3);
}

.btn:active {
  transform: translateY(-.1rem);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

.btn--white {
  background-color: #fff;
  color: #777;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.btn--white::after {
  background-color: #fff;
}

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

<a href="#" class="btn btn--white">Button</a>