JSFiddle - React, Tailwind, and code Playground

HTML

<p class="test1">This does not work</p>

<p class="test2">This now works fine</p>

CSS

p{
    text-align: center;
    color: #FFF;
    padding:20px;
    background: #000;
}

.test1 {
    -webkit-animation: textOpacity .4s cubic-bezier(.165,.84,.44,1) .6s 1 both;
}

.test2 {
   animation: textNoOpacity .4s cubic-bezier(.165,.84,.44,1) .6s 1 both;
}

@-webkit-keyframes textNoOpacity {
    
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1,.1,1);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
    }
    
}
@-webkit-keyframes textOpacity {
    
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0,0,1);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
    }
    
}