keyframe não popula com jQuery

[Carlos Rocha]

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>