jQueryのanimateで要素をCSSアニメーション(transformの場合)

jQueryでtransformをつかってアニメーションする場合はstepを使う必要があります

使用方法

$(セレクタ).animate(

  {変更したCSS名:値, 変更したCSS名:値, ・・・},

  {duration:適用ミリ秒,  step:関数

);

クリックでanimationする

ソースコード

<button id="bt">クリックでanimationする</button>
<script>
  var flag=false;
  $(function(){
    $("#bt").click(function(){
      if(flag){
        $(this).css({ transform: 'rotate(0deg)' });
        $(this).animate(
          {width:"220px" , height:"80px", opacity:0.4},
          {duration:"fast",easing:"swing"}
        );
      }else{
        $(this).animate(
          {width:"320px",height:"200px",opacity:1.0,zIndex:359.9},
          {duration:1000,
            step:function(n){$(this).css({transform:'rotate('+n+'deg)'});}
          }
        );
      }
      flag=!flag;
    });
  });
</script>