@InputLite You are loading external .css file for your page: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
This file overwrites your body background property.
If you want to manually overwrite it, use !important for that property, like this:
Ideally, outside of codepen, you would solve that by making sure that your CSS file is called after bootstrap one. Edit: in other words, place this line: <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
After line with bootstrap css.
@InputLite there is so much wrong with what you doing that you should just relearn the basics before asking more questions.
Your containers have class of “box1” and “box2”, but in your CSS you try to use “box 1” with space. This approach will look for element “1” inside of the element with class “box”, which is not what you need. Change it to “box1” without spaces.
Property to pass animation information is called “animation”, not “animate” as in your example.
In your animation keyframes you are using property “left”\right" to try and animate it. This property is reserved for elements which are positioned with “position” property, it will have no affect on non positioned elements like this. To animate non positioned elements you can use property transform with value of translateX(0px).
So if I were to fix your example, CSS would look like this:
To expand on that, classes cannot have spaces in their name in the first place (if you want to use multiple classes, you separate them with a space). I do agree with the advice to revisit some basics, especially before using a framework, it’ll make your life easier.