JSFiddle - React, Tailwind, and code Playground

HTML

<p class='pick-opacity_1'>My animation is fine!</p>
<p class='pick-opacity_2'>My animation is bad!</p>

CSS

.pick-opacity_1 {
    -webkit-animation: opacity_1 2s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes opacity_1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.pick-opacity_2 {
    -webkit-animation: opacity_2 5s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes opacity_2 {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.1;
    }
    50% {
        opacity: 0,3;
    }

    75% {
        opacity: 0,6;
    }

    100% {
        opacity: 1;
    }
}