How do I sync css animations? or even put it together? - html

Question

My problem is that I want to loop the animation but I don't know how to solve it. i tried to use animation infinite unfortunately i couldn't solve the problem so i would contact you if you can help with this. The code would be the loading screen of a website. I want the animation to go on all the time. So how can this be solved?
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes toXCenter {
to {
transform: translateX(-50%);
}
}
#keyframes toFullHeight {
to {
height: 100%;
}
}
body {
background-color: #ffffff;
font-family: 'Montserrat', sans-serif;
}
.icon {
animation: fadeIn 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 0.8s 1 forwards, fadeOut 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 7s 1 forwards;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 50%;
height: 220px;
left: 50%;
opacity: 0;
overflow: hidden;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 220px;
}
.icon__content {
animation: moveDown 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 6s 1 forwards;
height: 100%;
position: relative;
width: 100%;
}
#keyframes moveDown {
to {
transform: translateY(100%);
}
}
.icon__finger {
animation: toXCenter 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 1.2s 1 forwards;
background-color: #FFCC80;
border-radius: 50px 50px 0 0;
bottom: 0;
content: "";
height: 136px;
left: 50%;
overflow: hidden;
position: absolute;
right: 0;
transform: translateX(-50%) translateY(200px);
width: 95px;
z-index: 1;
}
.icon__finger:before {
background-color: rgba(0, 0, 0, 0.025);
content: "";
height: 100%;
position: absolute;
right: 0;
width: 50%;
z-index: -1;
}
.icon__finger:after {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0 0 50px 50px;
content: "";
height: 70px;
left: 15px;
position: absolute;
right: 15px;
top: 0;
}
.icon__nail {
animation: toXCenter 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 1.2s 1 forwards;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 20px 20px 50px 50px;
bottom: 75px;
content: "";
height: 110px;
left: 50%;
overflow: hidden;
position: absolute;
right: 0;
transform: translateX(-50%) translateY(200px);
width: 60px;
z-index: 2;
}
.icon__nail:before {
animation: toFullHeight 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s 1 forwards;
background-color: #FFFFFF;
border-radius: 0 0 50px 50px;
bottom: 0;
content: "";
height: 0%;
position: absolute;
width: 100%;
z-index: 3;
}
.icon__nail:after {
animation: toFullHeight 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 3.6s 1 forwards, colours 4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 0s infinite alternate;
background-color: #F50057;
border-radius: 0 0 50px 50px;
bottom: 0;
content: "";
height: 0%;
position: absolute;
width: 100%;
z-index: 3;
}
#keyframes colours {
0% {
background-color: #E91E63;
}
50% {
background-color: #9C27B0;
}
100% {
background-color: #2196F3;
}
}
.nail__gloss {
border-radius: 0 0 20px;
bottom: 12px;
height: 100px;
overflow: hidden;
position: absolute;
right: 10px;
width: 26px;
z-index: 4;
}
.nail__gloss:before {
animation: toFullHeight 1.2s cubic-bezier(0.435, 0.715, 0.355, 0.595) 4.6s 1 forwards;
background-color: rgba(255, 255, 255, 0.5);
bottom: 0;
content: "";
height: 0%;
position: absolute;
right: 0;
width: 50%;
}
<div class="icon">
<div class="icon__content">
<div class="icon__nail">
<div class="nail__gloss"></div>
</div>
<div class="icon__finger">
</div>
</div>
</div>
https://codepen.io/drelaky/pen/LYybLMQ

Answer 1

I calculated the total animation time and it came to be about 8s. I have two answers for you:
Change the content of loader to restart the animation:
setInterval(() => {
let loader = document.querySelector("#loader");
let icon = loader.innerHTML;
loader.innerHTML = "";
loader.innerHTML = icon;
}, 8000);
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes toXCenter {
to {
transform: translateX(-50%);
}
}
#keyframes toFullHeight {
to {
height: 100%;
}
}
body {
background-color: rgb(58, 58, 58);
}
.icon {
animation: fadeIn 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 0.8s 1 forwards, fadeOut 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 7s 1 forwards;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 50%;
height: 220px;
left: 50%;
opacity: 0;
overflow: hidden;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 220px;
}
.icon__content {
animation: moveDown 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 6s 1 forwards;
height: 100%;
position: relative;
width: 100%;
}
#keyframes moveDown {
to {
transform: translateY(100%);
}
}
.icon__finger {
animation: toXCenter 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 1.2s 1 forwards;
background-color: #FFCC80;
border-radius: 50px 50px 0 0;
bottom: 0;
content: "";
height: 136px;
left: 50%;
overflow: hidden;
position: absolute;
right: 0;
transform: translateX(-50%) translateY(200px);
width: 95px;
z-index: 1;
}
.icon__finger:before {
background-color: rgba(0, 0, 0, 0.025);
content: "";
height: 100%;
position: absolute;
right: 0;
width: 50%;
z-index: -1;
}
.icon__finger:after {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0 0 50px 50px;
content: "";
height: 70px;
left: 15px;
position: absolute;
right: 15px;
top: 0;
}
.icon__nail {
animation: toXCenter 2s cubic-bezier(0.25, 0.54, 0.31, 0.995) 1.2s 1 forwards;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 20px 20px 50px 50px;
bottom: 75px;
content: "";
height: 110px;
left: 50%;
overflow: hidden;
position: absolute;
right: 0;
transform: translateX(-50%) translateY(200px);
width: 60px;
z-index: 2;
}
.icon__nail:before {
animation: toFullHeight 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2.2s 1 forwards;
background-color: #FFFFFF;
border-radius: 0 0 50px 50px;
bottom: 0;
content: "";
height: 0%;
position: absolute;
width: 100%;
z-index: 3;
}
.icon__nail:after {
animation: toFullHeight 1.4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 3.6s 1 forwards, colours 4s cubic-bezier(0.25, 0.54, 0.31, 0.995) 0s infinite alternate;
background-color: #F50057;
border-radius: 0 0 50px 50px;
bottom: 0;
content: "";
height: 0%;
position: absolute;
width: 100%;
z-index: 3;
}
#keyframes colours {
0% {
background-color: #E91E63;
}
50% {
background-color: #9C27B0;
}
100% {
background-color: #2196F3;
}
}
.nail__gloss {
border-radius: 0 0 20px;
bottom: 12px;
height: 100px;
overflow: hidden;
position: absolute;
right: 10px;
width: 26px;
z-index: 4;
}
.nail__gloss:before {
animation: toFullHeight 1.2s cubic-bezier(0.435, 0.715, 0.355, 0.595) 4.6s 1 forwards;
background-color: rgba(255, 255, 255, 0.5);
bottom: 0;
content: "";
height: 0%;
position: absolute;
right: 0;
width: 50%;
}
<div id='loader'>
<div class="icon">
<div class="icon__content">
<div class="icon__nail">
<div class="nail__gloss"></div>
</div>
<div class="icon__finger">
</div>
</div>
</div>
</div>
Record it using a screen recorder, convert it into gif and use it on the website. This will take less time and energy of the browser to render the loader.