1
Я пытаюсь добавить слайд вверх с нижней анимации CSS3 к элементу <main> на этом сайте, но анимация не воспроизводится и не выполняется.CSS Анимация не играет
Любая идея, почему?
Вот ссылка на страницу, где не происходит: https://dl.dropboxusercontent.com/u/270523/help/animate/new.html
А вот CSS для анимации:
.animated{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
Не ответ, всего несколько примечаний: ** # 1 ** Вам не нужен префикс '-ms-' для анимации. IE9 не поддерживает анимацию вообще, и IE10 поддерживает их без префиксов. Префикс '-ms-' был необходим только для предварительных просмотров * раннего * IE10, но позже предварительные просмотры и окончательная поддержка IE10 не прервали анимацию. ** # 2 ** Почему бы не использовать стенографию и установить анимацию на один и тот же класс, вместо того, чтобы разбивать ее на два класса одного и того же элемента? Кроме того, вы могли бы сделать уменьшенный тест? – Ana
@Ana +1 для [сокращенного тестового примера] (http://css-tricks.com/reduced-test-cases/) – bookcasey
@Ana Оба действительных пункта. Спасибо. Он отлично работает, когда я пытаюсь использовать его в JS Fiddle, здесь: http://jsfiddle.net/5hshn/2/, но не тогда, когда я пытаюсь его в полной реализации. –