body {
    /*position: relative;*/
}

#circle1 {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: green;
    animation-name: example1;
    animation-duration: 3s;
    //animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#circle2 {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: red;
    position: absolute;
    animation-name: example2;
    animation-duration: 3s;
    //animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#circle3 {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: blue;
    position: absolute;
    animation-name: example3;
    animation-duration: 3s;
    //animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#circle4 {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: yellow;
    position: absolute;
    animation-name: example4;
    animation-duration: 3s;
    //animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#circle5 {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: yellow;
    position: absolute;
    animation-name: example5;
    animation-duration: 3s;
    //animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

#circleTotal {
    width: 200px;
    height: 200px;
    border-radius: 200px;
    background-color: greenyellow;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    /*animation-name: example5;*/
    /*animation-duration: 3s;*/
    /*animation-iteration-count: infinite;*/
}

@keyframes example1 {
    0% {
        left: 0;
        top: 0;
    }
    /*25%  { left:200px; top:0;}*/
    /*50%  { left:200px; top:200px;}*/
    /*75%  { left:0; top:200px;}*/
    100% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
@keyframes example2 {
    0% {
        left: calc(100% - 100px);
        top: 0;
    }
    /*25%  { left:200px; top:0;}*/
    /*50%  { left:200px; top:200px;}*/
    /*75%  { left:0; top:200px;}*/
    100% {
        left: calc(50% );
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
@keyframes example3 {
    0% {
        left: 0;
        top: calc(100% - 100px);
    }
    /*25%  { left:200px; top:0;}*/
    /*50%  { left:200px; top:200px;}*/
    /*75%  { left:0; top:200px;}*/
    100% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
@keyframes example4 {
    0% {
        left: calc(100% - 100px);
        top: calc(100% - 100px);
    }
    /*25%  { left:200px; top:0;}*/
    /*50%  { left:200px; top:200px;}*/
    /*75%  { left:0; top:200px;}*/
    100% {
        left: calc(50% );
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
@keyframes example5 {
    0% {
        left: 50%;
        top: 0;
    }
    /*25%  { left:200px; top:0;}*/
    /*50%  { left:200px; top:200px;}*/
    /*75%  { left:0; top:200px;}*/
    100% {
        left: calc(50% );
        top: 50%;
        transform: translate(-50%, -50%);
    }
}