Pesquisar na Comunidade

Pessoal, erro não está dando. Porém, o keyframe não está sendo populado. Onde estou errando? Tentei das duas formas abaixo e nenhuma funcionou. $(document).ready(function(e) { $("div.slider ul.slide").ready(function(e) { var tempoTransicao = 5; var quantasImagens = $("div.slider ul.slide li img").size(); var tamanhoIntervalos = Math.round(100/quantasImagens); var tempoImagens = 0; var t = 0; ///////////////////ANIMAÇÃO AQUI//////////////// $("<style>@keyframe tocaSlide").css(function() { for (i = 1; i <= quantasImagens; i++) { tMin = t + tempoTransicao; tMax = t + tamanhoIntervalos; t+=tamanhoIntervalos; tMin + "% : margin-left:-" + tempoImagens + "%", tMax + "% : margin-left:-" + tempoImagens + "%" tempoImagens+=100; if(i==0) tMin=0; if(i==quantasImagens) tMax=100; } }); ///////////////////ANIMAÇÃO AQUI//////////////// $("div.slider ul.slide").css({ 'animation-duration' : tempoTransicao + 's', }); }); }); e, $(document).ready(function(e) { $("div.slider ul.slide").ready(function(e) { var tempoTransicao = 5; var quantasImagens = $("div.slider ul.slide li img").size(); var tamanhoIntervalos = Math.round(100/quantasImagens); var tempoImagens = 0; var t = 0; for (i = 1; i <= quantasImagens; i++) { tMin = t + tempoTransicao; tMax = t + tamanhoIntervalos; t+=tamanhoIntervalos; ///////////////////ANIMAÇÃO AQUI//////////////// $("<style>@keyframe tocaSlide").css( tMin + "% : margin-left:-" + tempoImagens + "%", tMax + "% : margin-left:-" + tempoImagens + "%" ); ///////////////////ANIMAÇÃO AQUI//////////////// tempoImagens+=100; if(i==0) tMin=0; if(i==quantasImagens) tMax=100; } $("div.slider ul.slide").css({ 'animation-duration' : tempoTransicao + 's', }); }); }); Onde estou errando? Eis o HTML: <div class="slider"> <ul class="slide"> <li><img src="_imgs/_slideShow/1.png" /></li> <li><img src="_imgs/_slideShow/2.png" /></li> <li><img src="_imgs/_slideShow/3.png" /></li> <li><img src="_imgs/_slideShow/4.png" /></li> </ul> </div>