转换：悬停：在不能正常工作之前

Question

基本上我要做的是在转换时应用转换：hover：before元素，这样当你用鼠标悬停在ava.png上时：在元素之前平滑地显示而不是立即显示。

我尝试将转换代码添加到：hover：after class（如下面的代码中所示）并尝试了我在StackOverflow上找到的解决方案之一，更改：hover to：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元素。要解决此问题，请使用:before呈现scale(0)，然后将其更改为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>