It’s a little hard to tell how much smoother it would be if it was built properly as there is a lot going on there.
You seem to using a keyframe that doesn’t match the width of the slide that you need. If you increase the dimension (and put in the missing colon) the slide becomes smoother. However I think that translate is a better option for animation that left position so remove the SlideOut keyframe and try this one instead.
It seems to work much better when I tries locally with those above settings.
Also I think that linear would be a better option for this slide effect rather easeinout. So change “ease-in-out” to linear in all the relevant styles.
I note that you do have a mish mash of code there and some variables in your css that shouldn’t be there and will likely break some styles.
Remove those as they shouldn’t be in a live css file.
The actual layout of the page is also a little suspect as you have a massive vertical scrollbar and a horizontal scrollbar that goes beyond the content. The vertical scrollbar is there because you moved most of the content back up the page using relative positioning and a massive negative top position. Position:relative doesn’t move anything physically as the element always occupies the same space in the flow of the document although visually it appears somewhere else; hence the massive vertical scrollbar. You will very rarely use relative positioning for structural layout and for horizontal alignment you should usually be floating or using inline-block.
It is also invalid to use spans to wrap block elements and can cause some browsers to have a headache.