title: Border-radius doesn't work when background isn't applied
body: <p>Why does border-radius not work when background is not applied onto the animation.</p>
  
  <p>The border radius only works when a background is applied at 0%-50%-100%. Without the background color the border-radius doesn't work.</p>
  
  <p>I expect the border-radius to change from a square to a circle and then back to a square.</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>    .square {
        /* Set up the normal state */
        display: block;
        width:350px;
        height:350px;
        margin: 200px auto;
        background:#41A9F0;
        /* apply the animation */
        animation: box 5s linear infinite;
      }
      @keyframes box {
        0% {
          transform: rotate(0) scale(0.2);
          /* background: #41A9F0; */
          border-radius: 0%;
        }
  
        50% {
          transform: rotate(180deg) scale(2);
          /* background: #5ABE8A; */
          border-radius: 50%;
        }
  
        100% {
          transform: rotate(360deg) scale(0.2);
          /* background: #41A9F0; */
          border-radius: 0%;
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Shape Animation Challenge&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- HINTS
      1) Open shape-animation-ANSWER.html in your browser and try to create the final product.
      2) Create a keyframe named box.
      3) There are three points to this animation, starts off as a square, then a circle (background color for the circle is #5ABE8A), then back to a square.  
      Hint: You will need the properties border-radius and transform --&gt;
    &lt;div class="square"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>