css - 容器的变换比例和子容器的逆变换比例

Question

我在 CSS 中遇到缩放问题。 div.container 有transform: scale(0.1)，所以因为正常的字体大小，这个元素的h1有transform: scale (10)。

悬停后，div.container 有transform: scale(0.5) 和h1 transform: scale(2)。一切都是动画的(transition: all 1s ease-in-out)。

但是，h1 的动画速度不如 div.container 的动画快，所以在 hover 之后，h1 非常大动画开始，然后快速收缩。

我认为这是因为 h1 应该有反转缓动。但是什么缓动与 ease-in-out 相反？还是其他地方的问题？

注意:我不能只缩放 div.image。此代码只是示例。我必须缩放 div.container。

.container, .title {
  transition: all 1s ease-in-out;
}

.image {
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 300px;
  width: 800px;
}

.container {
  transform: scale(0.1);
}

.title {
  margin: 0;
  text-align: center;
  padding-top: 1rem;
  transform: scale(10);
}

.container:hover {
  transform: scale(0.5);
}

.container:hover .title {
  transform: scale(2);
}

<div class="container">
   <div class="image">
   
   </div>
   <h1 class="title">Title</h1>
</div>

Answer 1

我发现它不适用于线性缓动。所以，问题不在于放松。

.container, .title {
  transition: all 1s linear;
}

.image {
  background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 300px;
  width: 800px;
}

.container {
  transform: scale(0.1);
}

.title {
  margin: 0;
  text-align: center;
  padding-top: 1rem;
  transform: scale(10);
}

.container:hover {
  transform: scale(0.5);
}

.container:hover .title {
  transform: scale(2);
}

<div class="container">
   <div class="image">
   
   </div>
   <h1 class="title">Title</h1>
</div>