过渡持续时间不适用于特定的div

Question

当使用zoom属性结束时，我试图将每个紫色和文本内部都悬停在更大的位置。

喜欢这个：

https://i.imagesup.co/images2/9fadd677f1625d887fdbd4819af96ee4acb6fe89.png

两个问题：

1. 持续时间不受影响（尝试将其置于悬停类中，而不是悬停类中，但仍然）。

2. 当我的鼠标在紫色顶部时，就像一个放大和缩小的循环：

这里是相关代码，感谢您的帮助！

**我希望duration属性在离开鼠标时具有一流的效果。

body {
  margin: 0 auto;
  overflow-x: hidden;
}

#divStyle1 {
  height: 90vh;
  background-color: #016087;
}

#purpuleLineBox {
  position: absolute;
  top: 25%;
}

#purpuleLine1 {
  background-color: #D52C82;
  height: 7vh;
  width: 30vw;
  margin-bottom: 30px;
}

#purpuleLine2 {
  background-color: #D52C82;
  height: 7vh;
  width: 38vw;
  margin-bottom: 30px;
}

#purpuleLine3 {
  background-color: #D52C82;
  height: 7vh;
  width: 42vw;
  margin-bottom: 30px;
}

#purpuleLine4 {
  background-color: #D52C82;
  height: 7vh;
  width: 50.5vw;
  margin-bottom: 30px;
}

#purpuleLine5 {
  background-color: #D52C82;
  height: 7vh;
  width: 52.5vw;
  margin-bottom: 30px;
}

div>p {
  color: white;
  text-shadow: 2px 2px black;
  font-weight: bold;
  font-size: 2vw;
  margin-left: 7px;
  position: relative;
  top: 5%;
}

.purpuleHover {
  zoom: 100%;
  transition-duration: 0.5s;
}

.purpuleHover:hover {
  zoom: 120%;
}

<div id="divStyle2">
  <main>
    <div id="purpuleLineBox">
      <div id="purpuleLine1" class="purpuleHover">
        <p>100% recyclable and bio-degradable</p>
      </div>
      <div id="purpuleLine2" class="purpuleHover">
        <p>Simulates the natural ripening process, organic</p>
      </div>
      <div id="purpuleLine3" class="purpuleHover">
        <p>The quickest way to achieve the perfect avocado taste</p>
      </div>
      <div id="purpuleLine4" class="purpuleHover">
        <p>Work with Mango, Banana, Peach, and another climacteric fruits</p>
      </div>
      <div id="purpuleLine5" class="purpuleHover">
        <p>The user interface on the bag shows when an avocado is fully ripen</p>
      </div>
    </div>
  </main>
</div>

Answer 1

您需要添加transition-property，它定义了转换应处理的css属性，而不仅仅是transition-property。您可以通过单独的减速度或一个transition-duration声明来执行此操作。

此外，您必须用transition代替变焦。

transform: scale()

body {
  margin: 0 auto;
  overflow-x: hidden;
}

#divStyle1 {
  height: 90vh;
  background-color: #016087;
}

#purpuleLineBox {
  position: absolute;
  top: 25%;
}

#purpuleLine1 {
  background-color: #D52C82;
  height: 7vh;
  width: 30vw;
  margin-bottom: 30px;
}

#purpuleLine2 {
  background-color: #D52C82;
  height: 7vh;
  width: 38vw;
  margin-bottom: 30px;
}

#purpuleLine3 {
  background-color: #D52C82;
  height: 7vh;
  width: 42vw;
  margin-bottom: 30px;
}

#purpuleLine4 {
  background-color: #D52C82;
  height: 7vh;
  width: 50.5vw;
  margin-bottom: 30px;
}

#purpuleLine5 {
  background-color: #D52C82;
  height: 7vh;
  width: 52.5vw;
  margin-bottom: 30px;
}

div>p {
  color: white;
  text-shadow: 2px 2px black;
  font-weight: bold;
  font-size: 2vw;
  margin-left: 7px;
  position: relative;
  top: 5%;
}

.purpuleHover {
  transform: scale(1);
  transition: transform 0.5s;
}

.purpuleHover:hover {
  transform: scale(1.5);
}