Code on codepen - codepen.io/Andrey-m/pen/QjypPV?editors=110

Trying to master css animation

Help me fix the code to keep it adaptable.

When I reduce the window width, everything collapses.

Conventionally, the "load bar" is set in px, I put% the result is not what is expected

The end result is predictable.

Tell me the error.

If someone can correct the code - you are a holy man, thank you very much.

    1 answer 1

    You have a problem in the wrong design. The animation unit must be rubber and all elements must be completely positioned inside it as a percentage. So that this block could be thrown inside any container and get the result.

    Here is an example: http://jsfiddle.net/IonDen/ssgx0j7w/

    HTML:

    <div class="anim"> <div class="anim-point num--1"> <div class="anim-circle">1<div class="anim-done"></div></div> </div> <div class="anim-point num--2"> <div class="anim-circle">2<div class="anim-done"></div></div> </div> <div class="anim-point num--3"> <div class="anim-circle">3<div class="anim-done"></div></div> </div> <div class="anim-point num--4"> <div class="anim-circle">4<div class="anim-done"></div></div> </div> <div class="anim-point num--5"> <div class="anim-circle">5<div class="anim-done"></div></div> </div> <div class="anim-pol"></div> </div>

    CSS:

     .anim { position: relative; background: #eee; height: 30px; } .anim-point { position: absolute; top: 50%; width: 0; height: 0; z-index: 1; } .anim-point.num--1 {left: 0%;} .anim-point.num--2 {left: 25%;} .anim-point.num--3 {left: 50%;} .anim-point.num--4 {left: 75%;} .anim-point.num--5 {left: 100%;} .anim-circle { position: absolute; top: -30px; left: -30px; width: 60px; height: 60px; border: 1px solid #ccc; border-radius: 50%; text-align: center; font-size: 30px; line-height: 58px; } .anim-done { position: absolute; top: -40px; left: 1px; width: 58px; height: 58px; background: #00f; border-radius: 50%; opacity: 0; } .num--1 .anim-done { animation: DONE-1 5s infinite; } .num--2 .anim-done { animation: DONE-2 5s infinite; } .num--3 .anim-done { animation: DONE-3 5s infinite; } .num--4 .anim-done { animation: DONE-4 5s infinite; } .num--5 .anim-done { animation: DONE-5 5s infinite; } @keyframes DONE-1 { 0% { opacity: 0; top: -40px; } 10% { opacity: 0.8; top: 1px; } 100% { opacity: 0.8; top: 1px; } } @keyframes DONE-2 { 0% { opacity: 0; top: -40px; } 20% { opacity: 0; top: -40px; } 30% { opacity: 0.8; top: 1px; } 100% { opacity: 0.8; top: 1px; } } @keyframes DONE-3 { 0% { opacity: 0; top: -40px; } 45% { opacity: 0; top: -40px; } 55% { opacity: 0.8; top: 1px; } 100% { opacity: 0.8; top: 1px; } } @keyframes DONE-4 { 0% { opacity: 0; top: -40px; } 70% { opacity: 0; top: -40px; } 80% { opacity: 0.8; top: 1px; } 100% { opacity: 0.8; top: 1px; } } @keyframes DONE-5 { 0% { opacity: 0; top: -40px; } 90% { opacity: 0; top: -40px; } 100% { opacity: 0.8; top: 1px; } } .anim-pol { position: relative; height: 100%; background: #f00; animation: BAR 5s infinite; } @keyframes BAR { 0% { width: 0; } 20% { width: 25%; } 25% { width: 25%; } 45% { width: 50%; } 50% { width: 50%; } 70% { width: 75%; } 75% { width: 75%; } 100% { width: 100%; } }