How to keep an object size the same when resizing the window

Question

I have circles that increase in width on an interval and once it reaches to a scale, it disappears and starts again. But every time I fade I resize the screen or zoom in and out the circle turns to like an oval or an really stretched object. How do I keep the circle, a circle, when the screen is getting resized.

Html

<div id="container">
    <div id="name-div">
        <h1 id="name">Open Touch</h1>
    </div>
    <ul class="bubbles">
        <li id="firstCircle"></li>
        <li id="secondCircle"></li>
        <li id="thirdCircle"></li>
        <li id="fourthCircle"></li>
        <li id="fifthCircle"></li>
        <li id="sixthCircle"></li>
    </ul>
</div>

Css

.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
}

.bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    border-radius: 100%;
    -ms-animation: fadeAndScale 33s ease-in infinite;
    -webkit-animation: fadeAndScale 33s ease-in infinite;
    -moz-animation: fadeAndScale 33s ease-in infinite;
    -o-animation: fadeAndScale 33s ease-in infinite;
    animation: fadeAndScale 33s ease-in infinite;
    transition-timing-function: linear;
}
/* The first Circle animation------------------------------------------------------------------------------------------------ */
.bubbles li:nth-child(1) {
    width: 9%;
    height: 20%;
    top: 20%;
    left: 20%;
    background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
    animation-name: firstCircle;
}
/* Mozilla First Circle Animation */
@-moz-keyframes firstCircle {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* Webkit First Circle Animation */
@-webkit-keyframes firstCircle {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
@-ms-keyframes firstCircle {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes firstCircle {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End first circle animation -------------------------------------------------------------------------------------- */\

/* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
.bubbles li:nth-child(2) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 40%;
    top: 40%;
    animation-name: secondAnimation;
}
/* Webkit Second Animation */
@-webkit-keyframes secondAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Second Animation */
@-moz-keyframes secondAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* Ms Second Animation */
@-ms-keyframes secondAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes secondAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End of Second Circle ------------------------------------------------------------------------------------- */

/*Begin of Third Circle ----------------------------------------------------------------------------------- */
.bubbles li:nth-child(3) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 60%;
    top: 10%;
    animation-name: thirdAnimation;
}
/* Webkit Third Animation */
@-webkit-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Third Animation */
@-moz-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* MS Third Animation */
@-ms-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End of the Third Circle --------------------------------------------------------------------------------------------------------- */

/* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(4) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 10%;
    top: 60%;
    animation-name: fourthAnimation;
}
/* Webkit Fourth Animation */
@-webkit-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Fourth Animation */
@-moz-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* MS Fourth Animation */
@-ms-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* END of Fourth Animation ------------------------------------------------------------------------------------------------ */

/* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(5) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 50%;
    top: 10%;
    animation-name: fifthAnimation;
}
/* Webki Fifth Animation */
@-webkit-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
@-moz-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
@-ms-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */

/* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(6) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 80%;
    top: 60%;
    animation-name: sixthAnimation;
}
/* Webkit sixth animation */
@-webkit-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Sixth Animation */
@-moz-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* MS Sixth Animation */
@-ms-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}

Answer 1

Instead of providing width and height in % , use in px . Change following line:

width:100%;
height: 100%;

to

width:100px;
height: 100px;

and try again.

Explanation: When you are using height and width in % , then these properties are dependent on the container, ie window in your case, but if you provide these in px then it remains the same irrespective of the container height width.

Answer 2

If your problem is what i think you can use this :

width:100vw;
height: 100vh;

Your div will get the exact size of the window