CSS Анимация ширины справа налево и высота снизу вверх

Question

Я пытаюсь решить проблему расширения ширины div справа налево и высоты различного контейнера снизу вверх. Я пытаюсь создать анимацию CSS, которая будет вращаться в квадрате и имитировать границы здесь, это ссылка на мою CodePen https://codepen.io/Archezi/pen/xReqvq?editors=0100, если это поможет.

Вот мой HTML .container является основной оберткой .circle - это одна линия анимации1-line4 - это границы квадрата, которые я пытаюсь оживить.

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

Вот мой 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; } 
} 

Пожалуйста, направьте мне, где найти решения или указать мне другой подход к этой проблеме. Спасибо!

Answer 1

Добавить дополнительного стиль

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; 

и ключевых кадры

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

Answer 2

Проблема здесь состоит в том, что вам нужно для Line3 иметь абсолютное право, так что при изменении ширины, он будет растягиваться до левый.

Кроме того, линия 4 должна иметь абсолютное дно, чтобы оно растягивалось.

Я предлагаю вам добавить контейнер или изменить размеры текущего div.container (как я сделал в примере) для четырех строк и использовать 4 строки в качестве крайностей этого контейнера.

Вот ваш пример модифицирован в качестве точки отсчета о том, как продолжить:

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; } 
}