title: Transform scale of container and invert transform scale of child
body: <p>I have a problem with scaling in CSS. <code>div.container</code> has <code>transform: scale(0.1)</code>, so because of normal font size, <code>h1</code> in this element has <code>transform: scale(10)</code>.</p>
  
  <p>After hover, <code>div.container</code> has <code>transform: scale(0.5)</code> and <code>h1</code> <code>transform: scale(2)</code>. Everything is animated (<code>transition: all 1s ease-in-out</code>).</p>
  
  <p>However, animation of <code>h1</code> isn't as fast as animation of <code>div.container</code>, so after hover, <code>h1</code> is very big at the beginning of animation, and then quicky shrinks.</p>
  
  <p>I think it's happening because of <code>h1</code> should have invert easing. But what easing is invert to <code>ease-in-out</code>? Or is the problem elsewhere?</p>
  
  <p><strong>Note:</strong> I can't scaling only <code>div.image</code>. This code is only example. I have to scaling <code>div.container</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
     &lt;div class="image"&gt;
     
     &lt;/div&gt;
     &lt;h1 class="title"&gt;Title&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>