jQuery loop и reset custom css animation

Question

У меня есть анимированный баннер, который должен перезапустить анимацию, когда это будет сделано, моя проблема - баннер, анимированный только один раз. Этот код мой JQuery Я использую:

FourshatiAnimation(); 

function FourshatiAnimation() { 
/* One */ 
$forshati_text.addClass('forshati-text-trans'); 

$forshati_logo.delay(1000).queue(function(next) { 
    $(this).addClass('forshati-logo-trans'); 
}); 

$download_btn.delay(2000).queue(function(next) { 
    $(this).addClass('dwn-btn-trans'); 
}); 

$forshati_one.delay(4500).fadeOut('slow'); 


/* Two */ 
$icon_two.delay(5000).queue(function(next) { 
    $(this).addClass('icon-img-trans'); 
    next(); 
    $text_two.delay(1000).queue(function(next) { 
     $(this).addClass('forshati-txt-trans'); 
    }); 

    $forshati_text.removeClass('forshati-text-trans'); 
    $forshati_logo.removeClass('forshati-logo-trans'); 
    $download_btn.removeClass('dwn-btn-trans'); 
}); 

$forshati_two.delay(9000).fadeOut('slow'); 
$icon_two.removeClass('icon-img-trans'); 
$text_two.removeClass('forshati-txt-trans'); 
window.setTimeout(function() { FourshatiAnimation() }, 10000) 
} 

my jsFiddle.

Answer 1

Ok Я сделал демо работы --->HERE

Вы можете просмотреть исходный код страницы, чтобы скопировать CSS, и настройки. Я объяснил ниже.

Я использую keyframes для запуска анимации. Они не полностью поддерживаются, но не являются регулярными анимациями css.

Возможно, вам придется отрегулировать положение и время, чтобы улучшить его. Это пример ниже ключевого кадра. Он создает анимацию по имени item1 и устанавливает свойства, основанные на том, как далеко через анимацию.

@keyframes item1{ 
    0% {opacity: 1; left: -200px;} 
    15% {opacity: 1: left: 200px;} 
    50% {opacity: 0; left: 200px;} 
    100% {opacity: 0; left: -200px;} 
} 

Вы запускаете анимацию, как показано ниже: Вызывает имя item1 анимации, длительность, а затем говорит его повторить.

.forshati-text{ 
      animation: item1 10s infinite; 
    -webkit-animation: item1 10s infinite; 
} 

Когда вы видите CSS. Сначала я положил @keyframes. Для каждого @keyframes существует четыре префикса поставщика. Поэтому будьте осторожны, если вы настроите его, убедитесь, что вы изменили все четыре для одного и того же имени анимации. ех. item1

@keyframes 
@-webkit-keyframes 
@-moz-keyframes 
@-o-keyframes 

Надеюсь, что поможет!