cssHook

http://awardwinningfjords.com/2011/05/06/trigger-css3-animations-with-jquery.html

by calpo

HTML

<div class="controls">
      <button class="1x">Scale 1x</button>
      <button class="2x">Scale 2x</button>
      <button class="right">Translate to 150px Right</button>
      <button class="left">Translate to 25px Left</button>
    </div>
    
    <h5>No CSS3 Transitions</h6>
    <div class="box">
      <div class="square"></div>
    </div>
    
    <h5>CSS3 Transitions</h6>
    <div class="box css3">
      <div class="square"></div>
    </div>

CSS

.box { width: 250px; height: 100px; border: 1px solid black; position: relative; }
      .square { width: 40px; height: 40px; background: red; position: absolute; top: 25px; left: 25px; }
      .css3 .square {
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -o-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;
        transition: all 400ms ease-in-out;
      }

JavaScript

$('.2x').click(function() {
  $('.square').css({ scale: [2] })
});

$('.1x').click(function() {
  $('.square').css({ scale: [1] })
});

$('.right').click(function() {
//  $('.square').css({ translate: [150, 0] });
    $('.square').css({ border: "1px solid #000000;" });
    $('.square').css({-webkit-transform: "translate(150px, 0px) scale(1);"});
});

$('.left').click(function() {
  $('.square').css({ translate: [25, 0] })
});


// <div class="square" style="-webkit-transform: translate(150px, 0px) scale(1); "></div>