Please see http://www.backstageweb.net/newsite/images/fpo.jpg graphic to aid with instructions below.

I want to do two fairly basic animations on this page and they are essentially the same:

#1 - When "portfolio" is clicked, I want the spotlights to slide in from the left and right respectively, from outside the viewport to their location shown. When any other button is clicked, I want them to disappear the same way.

#2 - Again, when portfoilo is clicked, I want the 'web' and 'print' menus to slide in from the left and right respectively, and whichever one is clicked, the other one disappears.

I've got the animation code from http://daneden.me/animate/, and the instructions from https://github.com/daneden/animate.css, (I apologize, I know I'm straying into jQuery here a bit) but under 'Usage' on the github page I don't understand where that jQuery code goes.

Right now what I've got is this:

<div class="section" id="portfolio">
<img src="images/left-lights.png" alt="lights left" class="lights-left">
<img src="images/right-lights.png" alt="lights right" class="lights-right">

and CSS:

.lights-left {
height: 112px;
left: -24px;
position: relative;
top: -26px;
width: 169px;

-webkit-animation-name: LightsLeft;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-direction: forwards;
-webkit-animation-fill-mode: both;
}

.lights-right {
height: 112px;
position: relative;
right: -858px;
top: -26px;
width: 175px;

-webkit-animation-name: LightsRight;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-direction:forwards;
-webkit-animation-fill-mode: both;
}

@-webkit-keyframes LightsLeft { /*and the same/opposite for 'lights-right' */
0% {opacity: 0; -webkit-transform: translateX(-180px); }

50% { opacity: .5;}

100% {opacity: 1; -webkit-transform: translateX(0);}
}

I don't know about this positioning, seems to me it shouldn't be 'relative' but when I make it absolute the animation doesn't work at all. I'd be most grateful for some help with this.

Thanks,

John