How to hide children while changing width in css?

I have a feature in my React app that allows users to see a UI in both mobile and desktop sizes. I have my wrapper and I change the width of it by using classes like this:

 .wrapper.desktop {
   width: 720px;
  }

.wrapper.mobile {
   width: 320px
  }

I also animated changes of width by using:

transition: width 500ms ease-in-out;

Now, the problem is that I want to fade the children and content of my wrapper while changing the width to have smooth animation and a loading overflow. Is it possible to use CSS and how? If not, is it possible in React and how?