width: 150px;
150px;
height: 150px;
150px;
position: relative;
border-radius: 50%;
background: #00FFFF;
animation: nestedLoop 2s infinite;
}
.loop::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #FF0000;
animation: nestedLoop 2s infinite;
}
@keyframes nestedLoop{
0% {
transform: translate(0, 0);
opacity: 1;
}
25% {
transform: translate(50px, 0);
opacity: 0.8;
}
50% {
transform: translate(0, 50px);
opacity: 0.6;
}
75% {
transform: translate(-50px, 0);
opacity: 0.4;
}
100% {
transform: translate(0, -50px);
opacity: 0.2;
}
}