Как предотвратить анимацию ключевого кадра css при загрузке страницы?

Question

У меня есть анимация CSS с ключевыми кадрами на моей странице для элементов fadein/out. Проблема в том, что анимация fadeout отображается при загрузке страницы.

HTML:

<button class="toggle-good">Toggle display</button> 
<p class="box">I move nicely!</p> 

CSS:

.box { 
    height: 0; 
    opacity: 0; 
    animation: FadeOut 1s ease-in-out; 
} 
.box.active { 
    height: initial; 
    opacity: 1; 
    animation: FadeIn 1s ease-in-out; 
} 
@keyframes FadeIn { 
    0% { 
    opacity: 0; 
    height: initial; 
    } 
    100% { 
    opacity: 1; 
    height: initial; 
    } 
} 
@keyframes FadeOut { 
    0% { 
    opacity: 1; 
    height: initial; 
    } 
    99% { 
    opacity: 0; 
    height: initial; 
    } 
    100% { 
    height: 0; 
    opacity: 0; 
    height: 0; 
    } 
} 

JS:

$('button').on('click', function(e) { 
    $(this).siblings('.box').toggleClass('active'); 
}) 

Рабочий пример: http://codepen.io/MickL/pen/LkvWaA

Answer 1

Все вы должны сделать, это: animation-play-state: paused;

Однако, имея взгляд на ваш codepen, ключевой кадр анимации, вероятно, не лучший лучший ваш. Похоже, вы просто используете ключевые кадры, чтобы некоторые из ваших свойств изменялись только в конце анимации. К счастью, для этого есть функция синхронизации времени!

1. Использовать свойство перехода, используя шаг-шаг и шаг-старт для видимости и указателей-событий.
2. События указателя, используемые для предотвращения взаимодействия со скрытым элементом.
3. Max-height используется для удаления объекта из потока документов при скрытии.

Я развернул ручку быстрого кода, чтобы показать пример.

http://codepen.io/SudoCat/pen/LkvyEJ?editors=0100

Answer 2

Я опробован сиситемах возможности аренды. Только тот, который работал, должен был скрыть его JS, используя тайм-аут и абсолютное позиционирование.

Проблема будет в том случае, если анимация длиннее установленного таймаута. Или анимация должна отображаться до истечения таймаута.

$('.box').css({ 
    'position': 'absolute', 
    'top': '-9999px', 
    'left': '-9999px' 
}); 

setTimeout(function() { 
    $('.box').css({ 
     'position': 'relative', 
     'top': 'auto', 
     'left': 'auto' 
    }); 
}, 500);