在 :hover:before 无法正常工作之前转换

Question

基本上，我想要做的是在 :hover:before 元素上应用转换的过渡，这样当您将鼠标悬停在 ava.png 上时，:before 元素会平滑地出现而不是立即出现。

我尝试将转换代码添加到 :hover:after 类（如下面的代码所示），并尝试了我在 StackOverflow 上找到的解决方案之一，将 :hover 更改为 :before 并添加内容 + 转换到那个班级。不用说我的尝试都没有奏效，否则我现在不会在这里。 (:D)

如果有人能花时间帮助我，将不胜感激，谢谢！

#header .inner {
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
  -moz-transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  transition-delay: 0.25s;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  position: relative;
  z-index: 1;
}

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
  width: 98px;
  height: 92px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050955/ava.png");
}

#slide1:hover {
  position: relative;
}

#slide1:hover:before {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  z-index: -1;
  position: absolute;
  margin-left: -150px;
  margin-top: -50px;
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

#slide2 {
  position: relative;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 100;
  width: 140px;
  height: 160px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}

<div class="inner">
  <a id="slide1" href="/insider-informatie/over-mij.html"></a>
  <div id="slide2"></div>
  <h1>Header 1</h1>
  <p>My text</p>
</div>

Answer 1

要使过渡动画化，您需要对元素属性进行某种更改。这意味着元素应该是页面的一部分，显示（即没有display: none）和可见（没有visibility: hidden），但不知何故不可见/透明（例如opacity: 0）。

在您的情况下，除非您想显示它，否则您不会创建 :before 元素。要解决使用scale(0) 渲染:before 的问题，然后将其更改为scale(1)：

#header .inner {
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
  -moz-transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  transition-delay: 0.25s;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  position: relative;
  z-index: 1;
}

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
  width: 98px;
  height: 92px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050955/ava.png");
}

#slide1:hover {
  position: relative;
}

#slide1:before {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  z-index: -1;
  position: absolute;
  margin-left: -150px;
  margin-top: -50px;
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
    -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

#slide1:hover:before {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

#slide2 {
  position: relative;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 100;
  width: 140px;
  height: 160px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}

<div class="inner">
  <a id="slide1" href="/insider-informatie/over-mij.html"></a>
  <div id="slide2"></div>
  <h1>Header 1</h1>
  <p>My text</p>
</div>