title: css animation How to achieve changing width?
body: <p>I want to keep left side of the box fixed, and increase its width with time so that the right hand side moves horizontally. </p>
  
  <p>I wrote below code. You can try the animation at below link</p>
  
  <p><a href="https://www.w3schools.com/code/tryit.asp?filename=FTCPP2062CMB" rel="nofollow noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FTCPP2062CMB</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
      -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
      animation-name: example;
      animation-duration: 4s;
  
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes example {
      0%   {background-color:red; left:0px; top:0px;}
      25%  {background-color:yellow; left:200px; top:0px;}
      50%  {background-color:blue; left:200px; top:200px;}
      75%  {background-color:green; left:0px; top:200px;}
      100% {background-color:red; left:0px; top:0px;}
  }
  
  /* Standard syntax */
  @keyframes example {
      0%   {background-color:red; left:0px; top:0px; transform: scale(0.1,1);}
      25%  {background-color:yellow; left:0px; top:0px; scale(0.1,1);}
      50%  {background-color:blue; left:0px; top:0px; scale(0.1,1);}
      75%  {background-color:green; left:0px; top:0px; scale(0.1,1);}
      100% {background-color:red; left:0px; top:0px; scale(0.1,1);}
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; This example does not work in Internet Explorer 9 and earlier versions.&lt;/p&gt;
  
  &lt;div&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But it is keeping the centre of square as fixed and moving both sides. How do I keep one side fixed, and only move another horizontally?</p>