CSS animation timing, reversal & general flow - html

Question

I have started to create a CSS based animation here -
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #999999 !important;
height: 100vh;
width: 100vw;
font-size: 16px;
}
.loading-overlay {
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
z-index: 900;
background-color: #FFFFFF !important;
}
.loading-overlay.relative {
position: relative !important;
left: 0 !important;
width: auto !important;
height: auto !important;
}
.loading-overlay .brand-logo-animation-loop {
height: 12rem;
width: 12rem;
display: block;
position: absolute;
right: calc(50% - 6rem);
top: calc(50% - 6rem);
}
.loading-overlay .brand-logo-animation-loop .shape1 {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 6rem 0 6rem 6rem;
border-color: transparent transparent transparent #FAE6FF;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: shape1;
animation-name: shape1;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.loading-overlay .brand-logo-animation-loop .shape2 {
position: absolute;
left: 6rem;
width: 0;
height: 0;
border-style: solid;
border-width: 6rem 6rem 6rem 0;
border-color: transparent #FAE6FF transparent transparent;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: shape2;
animation-name: shape2;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.loading-overlay .brand-logo-animation-loop .shape3 {
width: 0;
height: 0;
opacity: 0;
border-style: solid;
border-width: 3rem 0 3rem 3rem;
border-color: transparent transparent transparent #660296;
position: absolute;
z-index: 200;
top: 3rem;
left: 3rem;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: shape3;
animation-name: shape3;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform-origin: top left;
}
.loading-overlay .brand-logo-animation-loop .shape3:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3rem 3rem 3rem 0;
border-color: transparent #660296 transparent transparent;
position: absolute;
top: -3rem;
right: 3rem;
}
.loading-overlay .brand-logo-animation-loop .shape3 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.loading-overlay .brand-logo-animation-loop .shape4 {
width: 0;
height: 0;
border-style: solid;
border-width: 3rem 0 3rem 3rem;
border-color: transparent transparent transparent #8203C0;
position: absolute;
z-index: 100;
bottom: 0;
left: 6rem;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: shape4;
animation-name: shape4;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
transform-origin: top left;
opacity: 0;
}
.loading-overlay .brand-logo-animation-loop .shape4:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 3rem 3rem 3rem 0;
border-color: transparent #8203C0 transparent transparent;
position: absolute;
top: -3rem;
right: 3rem;
}
.loading-overlay .brand-logo-animation-loop .shape4 {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.loading-overlay .brand-logo-animation-loop .shape5 {
width: 0;
height: 0;
border-style: solid;
border-width: 3rem 0 3rem 3rem;
border-color: transparent transparent transparent #8203C0;
position: absolute;
bottom: 0;
opacity: 0;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: shape5;
animation-name: shape5;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.loading-overlay .brand-logo-animation-loop .shape5 {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
#-webkit-keyframes master-turn {
0% {
transform: rotate(-45deg);
}
25% {
transform: rotate(-45deg);
}
40% {
transform: rotate(0deg);
}
60% {
transform: rotate(0deg);
}
75% {
transform: rotate(-45deg);
}
100% {
transform: rotate(-45deg);
}
}
#keyframes master-turn {
0% {
transform: rotate(-45deg);
}
25% {
transform: rotate(-45deg);
}
40% {
transform: rotate(0deg);
}
60% {
transform: rotate(0deg);
}
75% {
transform: rotate(-45deg);
}
100% {
transform: rotate(-45deg);
}
}
#-webkit-keyframes shape1 {
0% {
left: 3rem;
opacity: 0;
}
20% {
left: calc($smallSize - 1rem);
opacity: 0.2;
}
80% {
left: calc($smallSize - 2rem);
opacity: 0.8;
}
100% {
left: 0rem;
opacity: 1;
}
}
#keyframes shape1 {
0% {
left: 3rem;
opacity: 0;
}
20% {
left: calc($smallSize - 1rem);
opacity: 0.2;
}
80% {
left: calc($smallSize - 2rem);
opacity: 0.8;
}
100% {
left: 0rem;
opacity: 1;
}
}
#-webkit-keyframes shape2 {
0% {
left: -3rem;
opacity: 0;
transform: rotate(-180deg);
}
20% {
left: 0rem;
opacity: 0.2;
transform: rotate(-90deg);
}
80% {
left: 3rem;
opacity: 0.8;
}
100% {
left: 6rem;
opacity: 1;
transform: rotate(0deg);
}
}
#keyframes shape2 {
0% {
left: -3rem;
opacity: 0;
transform: rotate(-180deg);
}
20% {
left: 0rem;
opacity: 0.2;
transform: rotate(-90deg);
}
80% {
left: 3rem;
opacity: 0.8;
}
100% {
left: 6rem;
opacity: 1;
transform: rotate(0deg);
}
}
#-webkit-keyframes shape3 {
0% {
opacity: 0;
transform: scale(0);
}
20% {
pacity: 0.2;
transform: scale(0.5);
}
80% {
opacity: 0.8;
transform: scale(1);
}
100% {
opacity: 1;
}
}
#keyframes shape3 {
0% {
opacity: 0;
transform: scale(0);
}
20% {
pacity: 0.2;
transform: scale(0.5);
}
80% {
opacity: 0.8;
transform: scale(1);
}
100% {
opacity: 1;
}
}
#-webkit-keyframes shape4 {
0% {
bottom: 3rem;
left: 3rem;
opacity: 0;
}
50% {
bottom: 3rem;
left: 3rem;
opacity: 0.5;
}
100% {
bottom: 0rem;
left: 6rem;
opacity: 1;
}
}
#keyframes shape4 {
0% {
bottom: 3rem;
left: 3rem;
opacity: 0;
}
50% {
bottom: 3rem;
left: 3rem;
opacity: 0.5;
}
100% {
bottom: 0rem;
left: 6rem;
opacity: 1;
}
}
#-webkit-keyframes shape5 {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
#keyframes shape5 {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
<div class="loading-overlay">
<div class="brand-logo-animation-loop">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="shape3"></div>
<div class="shape4"></div>
<div class="shape5"></div>
</div>
</div>
Codepen: https://codepen.io/erswelljustin/pen/ExbKMaz
I am stuck on the timing and how to have it run forwards and then reverse out.
Explanation:
Shape 1 and Shape 2 should play first with Shape 2 rotating in from the left of its container, once this has finished then the Shape 3 animation should run, then Shape 4 and Shape 5 after that, once all completed I need to reverse the process until the shapes are gone.
I would like the whole animation to run infinitely as it is supposed to be a loading animation for an app.
I have been staring at this for days and no mater the delays I place it seems to ruin oddly, can any one help me please.
Note: I'd like to avoid using JavaScript with this.

Answer 1

It seems that the animation-delay:6 simply doesn't sync for 100% with the actual duration of another animation that lasts 6 seconds. Especially when it keeps looping.
You might try making all animations the same length (say 10 seconds) and only use the keyframe percentages to decide when an animation starts or stops. For example, here shape2 becomes visible after shape1 became visible.
.shape1 {
width:100px;
height:100px;
background-color:green;
animation: shape1 3s infinite linear;
}
.shape2 {
width:100px;
height:100px;
background-color:blue;
animation: shape2 3s infinite linear;
}
#keyframes shape1 {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes shape2 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="shape1"></div>
<div class="shape2"></div>