:root {
    --sun-anim-duration: 5s;
    --moon-anim-duration: 5s;
}

/* 太陽のアニメーション */

#sun {
    animation-duration: var(--sun-anim-duration);
    animation-name: dummy-anim-sun;
}

@keyframes dummy-anim-sun {0% {}}

.corona {
    animation-duration: var(--sun-anim-duration);
    animation-timing-function: cubic-bezier(1, 0, 1, 0);
    animation-iteration-count: infinite;
}

.corona-1 { animation-name: anim-corona-1; }
.corona-2 { animation-name: anim-corona-2; }
.corona-3 { animation-name: anim-corona-3; }
.corona-4 { animation-name: anim-corona-4; }
.corona-5 { animation-name: anim-corona-5; }
.corona-6 { animation-name: anim-corona-6; }
.corona-7 { animation-name: anim-corona-7; }
.corona-8 { animation-name: anim-corona-8; }

@keyframes anim-corona-1{ 12.5% { opacity: 0; } 100% { opacity: 0; }}
@keyframes anim-corona-2{ 25.0% { opacity: 0; } 100% { opacity: 0; }}
@keyframes anim-corona-3{ 37.5% { opacity: 0; } 100% { opacity: 0; }}
@keyframes anim-corona-4{ 50.0% { opacity: 0; } 100% { opacity: 0; }}
@keyframes anim-corona-5{ 62.5% { opacity: 0; } 100% { opacity: 0; }}
@keyframes anim-corona-6{ 75.0% { opacity: 0; } 100% { opacity: 0; }}
@keyframes anim-corona-7{ 87.5% { opacity: 0; } 100% { opacity: 0; }}
@keyframes anim-corona-8{ 100.% { opacity: 0; } 100% { opacity: 0; }}

/* 月のアニメーション*/

#grow-moon {
    animation-duration: var(--moon-anim-duration);
    animation-timing-function: linear; 
    animation-name: anim-grow-moon;
}

@keyframes anim-grow-moon {
    50% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(0);
    }
}

#moon-shadow {
    animation-duration: var(--moon-anim-duration);
    animation-timing-function: linear;
    animation-name: anim-moon-shadow;
}

@keyframes anim-moon-shadow {
    0% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(100%);
    }
}