A sugestão é que você redefina o keyframe o sobrescrevendo em uma nova tag style via jQuery:
Esse método sobrescreve a keyframe inicial, portanto primeiro pegue seu css inicial e defina ele numa variável para manter a salvo
Tente assim
- Copie o css da keyframe que você tem inicialmente, apenas a parte que define a porcentagem e seu conteúdo, remova a quebra de linhas, deixando tudo em uma linha e guarde em uma variável de texto.
- Defina uma outra variável de texto para os novos valores e insira o código que você já tem para essa keyframe, então incorpore o que você quer incluir.
- Agora criaremos outra variável de texto contendo o corpo do novo style,
- Feito isso é só adicionar o novo style no body do seu site.
Ao final, deverá ter algo assim:
var tMin = 0;
var tMax = 20;
var tempoImagens = 20;
var inicial = "x% {top:0px;} y%{top:50px;}";/*seu css de keyframes inicial*/
var novo = inicial;
novo += tMin+"% {";
novo += "margin-left:-" + tempoImagens + "%";
novo += "}";
novo += tMax+"% {";
novo += "margin-left:-" + tempoImagens + "%";
novo += "}";
var base = "<style>@keyframes animacao {"+novo+"}</style>";
$('body').append(base);
O que deu errado na sua tentativa:
Primeiramente: A interpretação está errada no uso do método .css() para múltiplas entradas;
Esse método espera como entrada o seguinte formato:
$.css({
"propriedade": "valor",
"outra-proriedade": "outro-valor"
});
Veja, também, que você está definindo [início]: "propriedade":"valor"
Isso por si só já viola o formato básico da estrutura de definição de uma keyframe:
[início] {
"propriedade": "valor";
"outra-proriedade": "outro-valor";
}
[...]
[fim] {
"propriedade": "valor";
"outra-proriedade": "outro-valor";
}
Outra coisa: Você está definindo keyframes no singular. https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
:
...