動的なページ遷移

Question

コンテンツをAjaxで読み込んだりアンロードするときに、コンテンツを@keyframesアニメーションに変換しようとしています。アクティブなデモは現在ここにあります：Test Page

私は多分JavaScriptを使用できないと思っていましたが、これが機能するかどうかわかりません。下のCSSの試行で間違っていてもいいですか？

/* Animation Settings */ 
.aniDown { 
z-index:0; 
-webkit-animation-name: slideDown; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: ease; 
-webkit-animation-direction:normal; 
} 

@-webkit-keyframes slideDown { 
0% { margin-top:-3000px; } 
40% { margin-top:-100px; } 
100% { margin-top:0px;  } 
} 

header a:active .aniDown, 
header a:focus .aniDown { 
-webkit-animation-name: slideUp; 
} 

@-webkit-keyframes slideUp { 
0% {margin-top:0px;} 
20% {margin-top:-1000px;} 
100% {margin-top:-3000px;} 
} 

Answer 1

margin-topの代わりにtranslate3d（x、y、z）を使用します。それはアニメーションをスピードアップします。

それ以外の場合は、コードが一見して正しいと思われるので、私はまっすぐ答えはありません。しかし、私はCSSアニメーションについての記事を書いた：http://samuli.hakoniemi.net/having-fun-with-css-keyframes/。たぶんあなたはそれを読んで、あなたが何か間違っているかどうかを比較するべきです。