容器的变换比例和子变换的缩放比例

Question

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

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

但是，h1的动画并不像动画div.container那么快，所以在悬停后，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>