transition a div when rendered

I have a component that renders copy depending on the response from the backend (i use a ternary). I use loaders to manage the loading state, however, when the response is received the copy slaps the screen abruptly.

Is there a way to slow the render time of the div? I have messed around with transition but can't get the div to render slower.

here is an example of the div

 isEnglishStudent ?
      <div className={css.test}>
          To enable this feature you need to......blah blah 
      </div > :

.test {
    transition: 10s;
}