アニメーションjQueryはCSS属性で正しく書かれません

Question

おそらく私は間違ったことを知っています！しかし何？

$(".page-splash-page").bind("mousewheel DOMMouseScroll", function(){ 
    $(this).animate({ 
     -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     -moz-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
      }, 1000, function() { 
       { window.location.href = "http:..../work/"; } 
      }); 
    }); 
$(".page-splash-page").on("click touchstart", function() { 
    $(this).animate({ 
     -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     -moz-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
      }, 1000, function() { 
       { window.location.href = "http:...../work/"; } 
      }); 
    }); 
$(".page-splash-page").on("touchmove", function() { 
    $(this).animate({ 
     -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     -moz-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
      }, 1000, function() { 
       { window.location.href = "http:..../work/"; } 
      }); 
    }); 

申し訳ありませんが、私はこの機能が働くことを願っていますが、私は、JSやjQueryのそんなに専門家ではないんですよ！ いくつかは私を助けることができます！ありがとうございました！

Answer 1

まず、jQueryアニメーションとCSSアニメーションが混在しています。

ここでは、クリックして-500pxでページスプラッシュページをアニメーション表示する簡単なペンを追加しました。うまくいけば、これはあなたが始めるのに役立つことができます。

http://codepen.io/anon/pen/MpOabq

$(".page-splash-page").on("click", function() { 
$(this).animate({ 
    top:'-500px', 
     }, 1000, function() { 
      { window.location.href = 'http://www.google.com' } 
     }); 
});