'scaleX increasing automatically in keyframes

In this example it is clear why the grow animation works:

@keyframes grow {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  } 
}

However, why does it also work in the below code snippet?

    div {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: grow 5s;
    }
    
    @keyframes grow {
      0% {
        transform: scaleX(0);
      }
       
    }
 
<body>    
<h1>The @keyframes Rule</h1>
    
<div></div>    
</body>
</html>
htmlcss


Solution 1:[1]

The animation starts with the requested value but ends with the default value which is without the transform property

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mianbato

Related Questions