Need some help with basic animations (CSS)

Dev Zone Web Development
1

 

I'm in my first semester of programming and I need some advice on CSS animations. Basically, the red and yellow elements are supposed to be transitioned to their opposite sides, yellow to the right, red to the left.

I've got the elements to move, but the yellow element is basically doing the opposite of what I'm expecting it to do, basically its going to the right and outside the margin boundary.

Here is my code:

 https://gist.github.com/anonymous/df5efb13a21b1829f8c2

2

for starters, you are missing one closing div tag.

3

Alright, I've properly closed the div tags like so:

(Sorry for the terrible formatting)

<div id = "redBox"></div>
<div id="yellowBox">

 

The yellow element is now on a standstill, doesn't do anything. Other than the extra closing div tag, I haven't done anything else with the code.

4

http://codepen.io/anon/pen/nogqK

in summary:

@-webkit-keyframes animationRedBox {
0% {left: 0px;}
25% {left; 50px;}
 
last line has a type. it should be left: instead of left;.
 
then I changed positioning to absolute, modified positions to percent so it is less static. what else? You did a good job, you were nearly there just some typos here and there.
 
p.s. don't forget to add
<!doctype html>
before everything. codepen doesn't like it in online editor.
 
sorry for text formatting. text editor is doing this...