コンテナの縮尺を変えて、子の変換スケールを反転する

Question

CSSのスケーリングに問題があります。 div.containerはtransform: scale(0.1)なので、通常のフォントサイズのため、この要素のh1はtransform: scale(10)です。

ホバー後、div.containerはtransform: scale(0.5)とです。すべてがアニメーション化されています（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>