CSS Animation width from right to left and height from bottom to top

Question

I am trying to solve problem of expanding width of div from right to left and height of different container from bottom to top. I am trying to create CSS animation that will rotate in square and imitate borders of here is link to my CodePen https://codepen.io/Archezi/pen/xReqvq?editors=0100 if that's help.

Here is my HTML .container is a main wrapper .circle is one animation line1-line4 are borders of square that I'm trying to animate.

<div class="container">
    <div class="circle "></div>
    <div class="line1  "></div>
    <div class="line2  "></div>
    <div class="line3  "></div>
    <div class="line4  "></div>
</div>

Here is my CSS

body {
    margin: 0 auto;
}
.container {
    position:relative;
    margin: 50px auto;
    width: 800px;
    height:800px;
    border:1px solid #000;
}
.circle {
    display:inline-block;
    width: 25px;
    height: 25px;
    border-radius:50%;
    position: absolute;
    top:100px;
    left:100px;
    background:#000;
    animation: myframes 4s ease-in-out 0s infinite;

    /* animation-name: myanimation;
    animation-duration:5s;
    animation-timing-function:ease-in-out;
    animation-delay: 0s;
    animaiton-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running; */
}
.line1 {
    height:15px;
    width:15px;
    position:absolute;
    top:105px;
    left:105px;
    background:red;
    animation: squerframe 2s ease-in-out 0s infinite;
}
.line2 {
    height:15px;
    width:15px;
    position:absolute;
    top:105px;
    left:205px;
    background:green;
    animation: squerframe2 2s ease-in-out 1s infinite;
}
.line3 {
    height:15px;
    width:15px;
    position:absolute;
    top:205px;
    left:205px;
    background-color:red;
    animation: squerframe3 2s ease-in-out 2s infinite;
}

.line4 {
    height:15px;
    width:15px;
    position:absolute;
    top:205px;
    left:105px;
    background:green;
    animation: squerframe4 2s ease-in-out 3s infinite;
}
@Keyframes squerframe 
{
    0%  {  width:15px; opacity: 1; }
    50% {  width:115px; }
    100%{  width:115px; opacity: 0; }
}
@Keyframes squerframe2 
{
    0%  { height:15px;  opacity: 1; }
    50% { height:115px;             }
    100%{ height:115px;  opacity: 0;  }
}
@Keyframes squerframe3 
{
    0%  { width:115px; opacity: 0;}
    50% { width:115px; }
    100%{ width:15px; opacity: 1; }
}
@Keyframes squerframe3 
{
    0%  { width:15px; opacity: 1;}
    50% { width:115px;  }
    100%{ width:115px; opacity: 0; }
}
@Keyframes squerframe4 
{
    0%  {  height:15px; opacity: 1;}
    50% {  height:115px;  }
    100%{  height:115px; opacity: 0; }
}

@keyframes myframes 
{
    0%   { top:100px; left:100px; }
    25%  { top:100px; left:200px; }
    50%  { top:200px; left:200px; }  
    75%  { top:200px; left:100px; }
    100% { top:100px; left:100px; }
}

Please direct me where to find solutions or point me different approach to this problem. Thank You!

Answer 1

The problem here is that you need for line3 to have an absolute right, so that when the width changes, it will stretch to the left.

Also, line 4, should have an absolute bottom so it will stretch up.

I suggest you add a container or change the dimensions of the current div.container ( as i did in the example ) for the four lines, and use the 4 lines as the extremes of that container.

Here is your example modified as a point of reference on how to continue:

https://codepen.io/anon/pen/MbRvGM?editors=0100

body {
  margin: 0 auto;
}
.container {
  position:relative;
  margin: 50px auto;
  width: 115px;
  height:115px;
  border:1px solid #000;
}
.circle {
  display:inline-block;
  width: 25px;
  height: 25px;
  border-radius:50%;
  position: absolute;
  top:0px;
  left:0px;
  background:#000;
  animation: myframes 4s ease-in-out 0s infinite;

/*   animation-name: myanimation;
  animation-duration:5s;
  animation-timing-function:ease-in-out;
  animation-delay: 0s;
  animaiton-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running; */



}
.line1 {
  height:15px;
  width:15px;
  position:absolute;
  top:0px;
  left:0px;
  background:red;
  animation: squerframe 2s ease-in-out 0s infinite;
}
.line2 {
  height:15px;
  width:15px;
  position:absolute;
  top:0px;
  left:100px;
  background:green;
  animation: squerframe2 2s ease-in-out 1s infinite;
}
.line3 {
  height:15px;
  width:15px;
  position:absolute;
  top:100px;
  right:0px;
  float: right;
  background-color:red;
  animation: squerframe3 2s ease-in-out 2s infinite;
}

.line4 {
  height:15px;
  width:15px;
  position:absolute;  
  left:0px;
  bottom: 0;
  background:green;
  animation: squerframe4 2s ease-in-out 3s infinite;
}
@Keyframes squerframe 
{
  0%  {  width:15px; opacity: 1; }
  50% {  width:115px; }
  100%{  width:115px; opacity: 0; }
}
@Keyframes squerframe2 
{
  0%  { height:15px;  opacity: 1; }
  50% { height:115px;             }
  100%{ height:115px;  opacity: 0;  }
}
@Keyframes squerframe3 
{
  0%  { width:115px; opacity: 0;}
  50% { width:115px; }
  100%{ width:15px; opacity: 1; }
 }
@Keyframes squerframe3 
{
  0%  { width:15px; opacity: 1;}
  50% { width:115px;  }
  100%{ width:115px; opacity: 0; }
}
@Keyframes squerframe4 
{
  0%  {  height:15px; opacity: 1;}
  50% {  height:115px;  }
  100%{  height:115px; opacity: 0; }
}

 @keyframes myframes 
{
   0%   { top:0px; left:0px; }
   25%  { top:0px; left:100px; }
   50%  { top:100px; left:100px; }  
   75%  { top:100px; left:0px; }
   100% { top:0px; left:0px; }
}

Answer 2

Add additional stylings

animation: squerframe4 2s ease-in-out 3s infinite;
-webkit-animation: squerframe4 2s ease-in-out 3s infinite;
-moz-animation: squerframe4 2s ease-in-out 3s infinite;

and for keyframes

@Keyframes squerframe...
@-webkit-Keyframes squerframe...
@-moz-Keyframes squerframe...