анимация ключевого кадра при загрузке

Question

Итак, я настраиваю анимацию ключевых кадров для анимации контента на одном веб-сайте AJAX. Проблема, с которой я столкнулся, заключается в этом. Когда страница загружается, я хочу, чтобы основной блок контента включался с экрана. Он запускается на экране с transform: translate3d(-100%,0,0);, а мои ключевые кадры оживляют его до transform: translate3d(0, 0, 0);.

@keyframes aboutSlide { 
    100% { 
     opacity: 1; 
     transform: translate3d(0, 0, 0); 
    } 
} 
@-moz-keyframes aboutSlide { 
    100% { 
     opacity: 1; 
     -moz-transform: translate3d(0, 0, 0); 
    } 
} 
@-o-keyframes aboutSlide { 
    100% { 
     opacity: 1; 
     -o-transform: translate3d(0, 0, 0); 
    } 
} 
@-webkit-keyframes aboutSlide { 
    100% { 
     opacity: 1; 
     -webkit-transform: translate3d(0, 0, 0); 
    } 
} 

    #about .content { 
     opacity: 0; 
     transform: translate3d(-100%, 0, 0); 
     animation: aboutSlide 1.5s ease-in-out 1; 
     -moz-animation: aboutSlide 1.5s ease-in-out 1; 
     -o-animation: aboutSlide 1.5s ease-in-out 1; 
     -webkit-animation: aboutSlide 1.5s ease-in-out 1; 
     -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
     transition-timing-function: cubic-bezier(0.7,0,0.3,1); 
    } 

Итак, когда анимация завершена, содержание возвращается к исходному transform: translate3d(-100%,0,0);, который, безусловно, не то, что я хочу это делать. Here - это ссылка на то, что у меня есть прямо сейчас.

Любая помощь была бы принята с благодарностью. Благодаря!

Answer 1

Эй, вы можете использовать animation-fill-mode:forwards, это остановит анимацию на последнем кадре.