css - Animation Not Running -

i trying make loading screen using css animations. screen 4 different bars shrinking , growing. want arrange them in formation form square. use absolute positioning position them, know if there better way. managed 3 bars display , float did not manage last one.

now, animations not running @ all. can me?

code: https://codepen.io/ngmh/pen/gxewjk

html:

<div id="top"></div> <div id="right"></div> <div id="bottom"></div> <div id="left"></div> 

css:

#top{   background-color: red;   width: 100px;   height: 25px;   border-radius: 12.5px;   position: absolute;   left: 37.5px;   animation-name: loading-1;   animation-duration: 4s;   animation-iteration-count: infinite; } #bottom{   background-color: yellow;   width: 100px;   height: 25px;   border-radius: 12.5px;   position: absolute;   top: 112.5px;   animation-name: loading-1;   animation-duration: 4s;   animation-iteration-count: infinite; } #left{   background-color: blue;   width: 25px;   height: 100px;   border-radius: 12.5px;   animation-name: loading-2;   animation-duration: 4s;   animation-iteration-count: infinite; } #right{   background-color: green;   width: 25px;   height: 100px;   border-radius: 12.5px;   position: absolute;   left: 112.5px;   top: 37.5px;   animation-name: loading-2;   animation-duration: 4s;   animation-iteration-count: infinite; } @keyframes loading-1{   0%:{width: 100px;}   50%:{width: 10px;}   100%:{width: 100px;} } @keyframes loading-2{   0%:{height: 100px;}   50%:{height: 10px;}   100%:{height: 100px;} } 

there shouldn't colon : after percent sign % in @keyframes rules

#top{    background-color: red;    width: 100px;    height: 25px;    border-radius: 12.5px;    position: absolute;    left: 37.5px;    animation-name: loading-1;    animation-duration: 4s;    animation-iteration-count: infinite;  }  #bottom{    background-color: yellow;    width: 100px;    height: 25px;    border-radius: 12.5px;    position: absolute;    top: 112.5px;    animation-name: loading-1;    animation-duration: 4s;    animation-iteration-count: infinite;  }  #left{    background-color: blue;    width: 25px;    height: 100px;    border-radius: 12.5px;    animation-name: loading-2;    animation-duration: 4s;    animation-iteration-count: infinite;  }  #right{    background-color: green;    width: 25px;    height: 100px;    border-radius: 12.5px;    position: absolute;    left: 112.5px;    top: 37.5px;    animation-name: loading-2;    animation-duration: 4s;    animation-iteration-count: infinite;  }  @keyframes loading-1{    0% {width: 100px;}    50% {width: 10px;}    100% {width: 100px;}  }  @keyframes loading-2{    0% {height: 100px;}    50% {height: 10px;}    100% {height: 100px;}  }

<div id="top"></div>  <div id="right"></div>  <div id="bottom"></div>  <div id="left"></div>

---

using pseudo elements make markup smaller , maybe more maintainable.

the outer not use absolute positioning , flow better rest of content.

.outer {    position: relative;  }  .outer div,  .outer::before,  .outer::after,  .outer div::before,  .outer div::after {    content: '';    position: absolute;    border-radius: 12.5px;    animation-duration: 4s;    animation-iteration-count: infinite;  }  .outer::before {    background-color: red;    width: 100px;    height: 25px;    left: 37.5px;    animation-name: loading-1;  }  .outer::after{    background-color: yellow;    width: 100px;    height: 25px;    top: 112.5px;    animation-name: loading-1;  }  .outer div::before{    background-color: blue;    width: 25px;    height: 100px;    animation-name: loading-2;  }  .outer div::after{    background-color: green;    width: 25px;    height: 100px;    left: 112.5px;    top: 37.5px;    animation-name: loading-2;  }  @keyframes loading-1{    0% {width: 100px;}    50% {width: 10px;}    100% {width: 100px;}  }  @keyframes loading-2{    0% {height: 100px;}    50% {height: 10px;}    100% {height: 100px;}  }

<div class="outer"><div></div></div>