On button click, animate various elements

[satelrom]

The dilemma I face at the moment is that I am creating a CSS3 based animation. Upon a div styled to look like a button being clicked, i'd like it to animate the div next to it to change the opacity of a div to 1 from 0.My understanding is to use keyframing however, i'm confusing as to how to go about animating another div from the click over another.Edit: JSFiddle belowhttp://jsfiddle.net/W8983/Update: Tried to incorporate the example given below into my animation.For some reason it doesn't start the animation on button click?CSS:\[code\]#Seed1{opacity:0;}#Seed1.animate{-webkit-animation-name: show;-webkit-animation-duration: 2s;-webkit-animation-timing-function: ease;-webkit-animation-iteration-count: 1; -webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;}@-webkit-keyframes show{ 0% { opacity: 0; } 100% { opacity: 1; }}\[/code\]HTML:\[code\]<div id="Seed1" class="target"></div>\[/code\]JS:\[code\]$(function () { var s = null, AnimationSpace = { settings: { tabHeaders: null, tabSections: null, currentIndex: null, speed: 800, collection: null, i: null, j: null, startButton: $("#startbutton") }, init: function () { s = this.settings; s.tabSections = $("div.tab"); $(s.tabSections[0]).slideDown(s.speed); $(s.tabSections[1]).slideUp(s.speed); $(s.tabSections[2]).slideUp(s.speed); $(s.tabSections[3]).slideUp(s.speed); $(s.tabSections[4]).slideUp(s.speed); this.getClickedTab(); this.startAnimation(); }, getClickedTab: function () { s = this.settings; s.tabHeaders = $("#sidebar_tabs ul.headers a"); s.collection = $("#tab_content div.tab"); $(s.tabHeaders).click(function () { s.currentIndex = $(this).parent().index(); for (s.i = 0, s.j = s.collection.length; s.i < s.j; s.i += 1) { if (s.i !== s.currentIndex) { $(s.tabSections[s.i]).slideUp(s.speed); } else { $(s.tabSections[s.i]).slideDown(s.speed); } } return false; }); }, startAnimation: function () { s = this.settings; s.startButton.click(function() { $("div.target").toggleClass("animate"); if (s.startButton.attr("value") === "ANIMATE THE SCENE") { s.startButton.attr("value", "RESET THE ANIMATION"); } else { s.startButton.attr("value", "ANIMATE THE SCENE"); } }); } }; AnimationSpace.init();});\[/code\]