scaleX increasing automatically in keyframes-CodePudding

I must be missing something fairly simple, I don't see why grow works below.

More precisely I would have understood why it worked if we had following animation instead:

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

But we don't. So why does the div keep increasing in below code anyway?

    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>

CodePudding user response：

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