[Question] CSS transition when classes are added?

I have a parent div and two divs inside of it: a sidebar and a content area. The class of nosidebar is initially applied to the parent div, which signals the sidebar to have a property right: -325px and the content to fill the screen. When the sidebar is toggled, the class of nosidebar is replaced with showsidebar and this causes the sidebar div to have property right: 0 and the content div to have right: 325px and opacity: 0.8, shifting it to the left and partially fading it out. This is all controlled by what class the parent div has.

So far this works, but when the transition happens instantly and abruptly. I would like to animate the toggle effect so that the sidebar and content divs slide in and out, and so the content div fades to a lower opacity.

Is there a way I can do this in CSS?

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted January 30, 2016 at 09:24PM by ElegantFunction http://ift.tt/20eqPlv