CSS Animation - Change%

У меня есть анимация, сделанная в CSS, в которой я хочу изменить% (или ключевой кадр) всякий раз, когда пользователь нажимает кнопку button.Means, анимация должна продолжаться, но из указанного ключевого кадра теперь имеет значение, keyframe, в котором он сейчас находится. HTML-код выглядит следующим образом:CSS Animation - Change%

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.animate{ 
    animation:main 5s infinite; 
} 
@ keyframes main{ 
    0%{color:#000000;} 
    25%{color:#FF0000;} 
    50%{color:#00FF00;} 
    75%{color:#0000FF;} 
    100%{color:#000000;} 
} 
</style> 
</head> 
<body> 
<div id="animate" class="animate">Some text</div> 
<div onclick="change()">Change frame</div> 
</body> 
</html> 
<script> 
function change(){ 
    document.getElementById("animate").style.frame=50%; //need help here 
} 
</script>

Анимация работает нормально. Проблема в том, что я не смог найти какое-либо свойство, которое я могу использовать для изменения ключевых кадров (object.style.frame не является свойством!)

Есть ли такие свойства, которые существуют для этого? Кто-нибудь знает, что такое свойство?

Ваша помощь очень ценится

источник

2014-08-28 Shubham Gupta

Можете ли вы разместить ссылку на JSFiddle? – RevanProdigalKnight

, почему у вас нет второго символа подкачки, который является второстепенным или что-то еще и имеет 0% ключевой кадр, каковым является основной ключевой кадр в главном 50%. – GifCo

Я сделал [demo] (http://jsfiddle.net/82pwzf77/2/), что вы может играть с @RevanProdigalKnight. – Kraz

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

Рассматривая его с точки зрения CSS и CSS-графики, если у вас нет движка или другого скрипта для вызова этих экземпляров ключевого кадра через js или CSS, он складывает код с нуля.

Я считаю, что это то, что @GifCo тоже водит, если я не ошибаюсь. Вы могли бы очень хорошо сделать это так же, это может стать немного запутанным и взять больше - я полагаю, «зацикливание», хотя - на конце кодирования, потому что метод более круговой, а не линейный, я думаю, что кодирование каждого пример ключевого кадра от одного к другому был бы более простым.

Я не собираюсь вводить код здесь, но 1 из которых 0%, 2 - 25% и т. Д., Это будет примерно так: 1 = 0%, вызывает 1-5 для анимации, 2 = 25%, вызывает 1-5 для анимации и так далее. Конечно, вам нужно найти способ разграничения между сценарием и таблицей стилей, иначе вы просто вызовите их сразу, когда будет воспроизводиться анимация. 5 ключевых кадров, каждый анимированный по 5 раз для каждого экземпляра, дает вам 25 анимаций, каждый из которых требует выполнения фрагмента кода.

Надеюсь, что смогу одолжить мозг и помочь в некотором роде, надеюсь, что все это сделало хоть какой-то уровень чувств, ура и счастливого кодирования моего друга! :)

источник

2014-08-28 18:34:31 dvr5fixfx

CSS Animation - Change%

ответ

Смежные вопросы