Динамические переходы страниц

Question

Я пытаюсь перевести контент с анимацией @keyframes при загрузке и разгрузке содержимого с помощью Ajax. Активная демонстрация в настоящее время находится здесь: 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

Использовать translate3d (x, y, z) вместо margin-top. Это ускоряет анимацию.

В противном случае у меня нет прямого ответа, так как ваш код выглядит действительным на первый взгляд. Но я написал статью о CSS Animations: http://samuli.hakoniemi.net/having-fun-with-css-keyframes/. Может быть, вы должны прочитать его и сравнить, делаете ли вы что-то неправильно.