jQuery изменить направление анимации ключевого кадра CSS на полпути через

Question

Любопытно узнать, есть ли способ использовать jQuery для обратного направления анимации ключевого кадра CSS в середине пути - не перезапускать первую точку.

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

Однако моя цель состоит в том, чтобы иметь возможность изменять направление на полпути после нажатия. Любые советы приветствуются.

http://jsfiddle.net/JQjGZ/210/

CSS:

#panorama-scroll { 
width: 100%; 
height: 512px; 
margin: 0; 
background: url(https://c2.staticflickr.com/2/1519/24649255286_03bb5ab0e3_b.jpg) repeat-x; 
} 

#panorama-scroll.forward { 
-webkit-animation: backgroundScroll 15s linear infinite; 
-moz-animation: backgroundScroll 15s linear infinite; 
animation: backgroundScroll 15s linear infinite; 

} 

@-webkit-keyframes backgroundScroll { 
from {background-position: 0 0;} 
to {background-position: -1024px 0;} 
} 
@-moz-keyframes backgroundScroll { 
from {background-position: 0 0;} 
to {background-position: -1024px 0;} 
} 
@keyframes backgroundScroll { 
from {background-position: 0 0;} 
to {background-position: -1024px 0;} 
} 

#panorama-scroll.reverse { 
-webkit-animation: backgroundScrollreverse 15s linear infinite; 
-moz-animation: backgroundScrollreverse 15s linear infinite; 
animation: backgroundScrollreverse 15s linear infinite; 
} 

@-webkit-keyframes backgroundScrollreverse { 
from {background-position: 0 0;} 
to {background-position: 1024px 0;} 
} 
@-moz-keyframes backgroundScrollreverse { 
from {background-position: 0 0;} 
to {background-position: 1024px 0;} 
} 
@keyframes backgroundScrollreverse { 
from {background-position: 0 0;} 
to {background-position: 1024px 0;} 
} 

Javascript

$(document).ready(function() { 
var content = $('#panorama-scroll'); 

$('#panorama-scroll').live('click', function() { 
    $(this).toggle(function() { 
     content.removeClass('forward').addClass('reverse'); 
    }, function() { 
     content.removeClass('reverse').addClass('forward'); 
    }).trigger('click'); 
}); 
}); 

Answer 1

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

Что вы можете сделать, это использовать percentage values для состояний анимации.

Это Ваш код прямо сейчас:

@-webkit-keyframes backgroundScroll { 
from {background-position: 0 0;} 
to {background-position: -1024px 0;} 
} 

Это должно быть что-то вроде этого, если вы хотите, чтобы изменить направление на полпути корыто:

@-webkit-keyframes backgroundScroll { 
0% {background-position: 0 0;} 
50% {background-position: -512px 0;} 
100% {background-position: 0 0;} 
} 

Чтобы изменить направление вашего CSS анимации вы должны использовать animation-play-state. После этого вы можете просто применить к нему некоторые действия jQuery по своему усмотрению.

Существует тщательное объяснение о том, что я имею в виду here.