Css transform problem

Question

I'm familularizing myself with css transforms (sticking with 2D for now). I've been able to make them work with the hover selector
I'm having trouble figuring out how to write the transform as a class, and then use jquery to use that class to effect a div/image
here is what I got
.sm_display
  display:inline-block;
  margin:0 5px;
                                        width: 162px;
  height:100px;
  border: solid 1px black;
                                        -webkit-transition:All 2s cubic-bezier(0.075, 0.820, 0.165, 1.000);
  .sm_display:hover
                                        -webkit-transform: translateY(-120px);
                               .animate_selection
                                        -webkit-transform: translateY(-120px);
<div class="sm_display"><img src="color.TIF"  width=" 162" height="100"/></div>
Im trying to move the img up on a click. (I've just tried manually pasting in .animate_selection with the .sm_display class to get it to work, when I do that it pops into place without animation. Can anyone show me what I'm doing wrong?
Thanks

Answer 1

I did a demo on CSS3 transitions with jQuery below:
http://alt-web.com/DEMOS/CSS-Animated-Panels.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/