Transform scale of container and invert transform scale of child - css

Question

I have a problem with scaling in CSS. div.container has transform: scale(0.1), so because of normal font size, h1 in this element has transform: scale(10).
After hover, div.container has transform: scale(0.5) and h1 transform: scale(2). Everything is animated (transition: all 1s ease-in-out).
However, animation of h1 isn't as fast as animation of div.container, so after hover, h1 is very big at the beginning of animation, and then quicky shrinks.
I think it's happening because of h1 should have invert easing. But what easing is invert to ease-in-out? Or is the problem elsewhere?
Note: I can't scaling only div.image. This code is only example. I have to scaling 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

I found out that it doesn't work with linear easing. So, problem is not in easing.
.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>