#rays-yellow{
animation: loaderAnimation4 1600ms ease-in-out 400ms infinite;
}
#rays-gray{
animation: loaderAnimation4 1600ms ease-in-out infinite;
}
@keyframes loaderAnimation{
0%{
transform-origin: center center;
transform: scale(1);
}
50%{
transform-origin: center center;
transform: scale(1.06);
}
100%{
transform-origin: center center;
transform: scale(1);
}
}
@keyframes loaderAnimation2{
0%{
transform-origin: center center;
transform: scale(1) rotate(0deg);
}
50%{
transform-origin: center center;
transform: scale(1.06) rotate(22.5deg);
}
100%{
transform-origin: center center;
transform: scale(1) rotate(0deg);
}
}
@keyframes loaderAnimation3{
0%{
transform-origin: center center;
transform: rotate(0deg);
}
100%{
transform-origin: center center;
transform: rotate(22.5deg);
}
}
@keyframes loaderAnimation4{
0%{
transform-origin: center center;
transform: rotate(0deg);
}
25%{
transform-origin: center center;
transform: rotate(22.5deg);
}
75%{
transform-origin: center center;
transform: rotate(22.5deg);
}
100%{
transform-origin: center center;
transform: rotate(45deg);
}
}
@keyframes loaderAnimation5{
0%{
transform-origin: center center;
transform: rotate(0deg);
}
25%{
transform-origin: center center;
transform: rotate(22.5deg);
}
75%{
transform-origin: center center;
transform: rotate(22.5deg);
}
100%{
transform-origin: center center;
transform: rotate(45deg);
}
}