Управление ключевыми кадрами из js?

Question

[Tanyel]

Какими способами можно управлять анимацией из js.
К примеру у меня есть правило:

@keyframes width{
	0% {
		width: 0px;
	}
	100% {
		width: 100px;
	}
}

Логично предположить что если я остановлю анимацию на 30% то у блока будет 30px.

Как можно управлять этим через js?

Например у меня есть переменная:

var procent = Math.round(Math.random()*100);
function keyframes(){
//тут должно быть что-то что поставит процент анимации на значение переменной procent 
}

Answer 1

[Дмитрий Беляев]

Для управления анимацией есть css свойство animation-play-state
https://developer.mozilla.org/ru/docs/Web/CSS/anim...

Вычислять время/проценты придется все же на js
Например по requestAnimationFrame проверять текущую ширину элемента, и если достигла нужного значения - паузить анимацию

Comments

[Tanyel]

Это свойство я знаю.
И знаю много плагинов с помощью которых можно ставить анимацию на паузу.
Но мне нужно останавливать на определенном проценте.

Аналог в AS3
gotoAndStop(20)

[Дмитрий Беляев]

Tanyel, тогда проще вычислять анимацию на js и перезаписывать стилевое правило

[Tanyel]

Дмитрий Беляев, это я уже и сделал 2 дня назад)

function controlkeyframes(obj,proc,str){
	var obj = $(obj);
	var procent = proc;
	var rules = str.split(';');

	var css = "";

	rules.forEach(function(item, i, arr) {
		var methods = item.split(',');
		var methodd = methods[0].split('.');
		var method = methodd[0];
		var methodstyle = methodd[1];
		var amount = methods[1];
		var keystart = Number(methods[2]);
		var keyend = Number(methods[3]);
		var rev = methods[4];

		if(rev=="rev"){
			if(procent>50){
				procent = procent-(procent-50)*2;
				procent = procent*2;
			}else{
				procent = procent*2;
			}
		}
		if(method=="transform"){
			var step = (keyend-keystart)/100;
			var valueprocent = (step*procent)+keystart;

			css += method+":"+methodstyle+"("+valueprocent+amount+");";

		}else{
			var step = (keyend-keystart)/100;
			var valueprocent = (step*procent)+keystart;

			css += method+":"+valueprocent+amount+";";
		}
	});

	obj.attr('style', css);
}

Answer 2

[mdss]

если подключен jquery, то есть плагин
https://github.com/Keyframes/jQuery.Keyframes

Comments

[Tanyel]

Я это уже видел, и множество аналогов.
Но ни у одного нет метода остановки анимации на определенном проценте.