Animacja - prośba o sugestie i uwagi

Przygotowałem prostą animację.

@keyframes intro-title {
    0% {
        opacity: 0;
        transform: translateY(-60%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro__title {
    animation: intro-title 1s .5s ease both;
}

@keyframes intro-text {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro__text {
    animation: intro-text 1s 1.5s ease both;
}

@keyframes intro-button {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro__button {
    animation: intro-button 1s 2.5s ease both;
}

Jeżeli chodzi tylko o kod to jest ok? można go jakoś zoptymalizować? Na pewno mogę usunąć "ease" bo jest on domyślną animacją.

Klatki kluczowe opacity wszędzie są takie same, więc możesz wydzielić je sobie do osobnej animacji:

@keyframes fade-in {
    0% {
        opacity: 0;
     }
    100% {
        opacity: 1;
     }
}

A później każdemu elementowi przypisywać dwie różne animacje równocześnie:

animation: fade-in 1s .5s ease both, intro-title 1s .5s ease both;