CSS右から左への高さと下から上への高さ

Question

divの幅を右から左に、高さを別のコンテナの下から上に拡大する問題を解決しようとしています。 CSSのアニメーションを作成しようとしています。このCSSアニメーションは四角形で回転し、ここの枠を模倣すると、CodePen https://codepen.io/Archezi/pen/xReqvq?editors=0100へのリンクが役立ちます。

ここは私のHTMLです.containerはメインラッパーです.circleは1つのアニメーションですline1-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は、伸びるように絶対的な底を持つ必要があります。

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