2016-12-22 14 views
7

Próbuję rozwiązać problem powiększania szerokości div od prawej do lewej i wysokości różnych kontenerów od dołu do góry. Próbuję stworzyć animację CSS, która będzie obracać się w kwadracie i naśladować granice tutaj jest link do mojego CodePen https://codepen.io/Archezi/pen/xReqvq?editors=0100, jeśli to pomoże.CSS Szerokość animacji od prawej do lewej i wysokość od dołu do góry

Oto mój HTML .container jest głównym opakowaniem .circle to jedna linia animacji1-line4 to granice kwadratów, które próbuję animować.

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

Oto mój 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; } 
} 

proszę kierować mi gdzie znaleźć rozwiązania lub wskaż mnie innego podejścia do tego problemu. Dziękuję Ci!

+0

Przepraszam, ale nie rozumiem w czym problem. Czy kodek nie działa? Dlaczego potrzebujesz innego rozwiązania? – vals

Odpowiedz

0

dodać kolejne stylizacje

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; 

i na klatkach kluczowych

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

Problemem jest to, że trzeba za Line3 mieć absolutne prawo, tak, że gdy zmienia się szerokość, będzie rozciągać się lewo.

Również linia 4 powinna mieć absolutne dno, aby się rozciągnęła.

Proponuję dodać kontener lub zmienić wymiary bieżącego div.container (tak jak w przykładzie) dla czterech linii i użyć 4 wierszy jako skrajności tego kontenera.

tutaj jest przykład zmodyfikowany jako punkt odniesienia, w jaki sposób, aby kontynuować:

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

Dziękuję za to rozwiązanie. Myślałem o tym, ale zastanawiałem się, czy istnieje jakieś inne rozwiązanie tego problemu. Dzięki za pomoc, a ja spróbuję się z tym bawić. – Archezi

Powiązane problemy