slideshow with different weather while increasing amount of images

Question

I have the jQuery down it is working very well.

Except for one detail: lógica do for is not correct:

To ideia is that the tempo de transição amid one imagem and another be the same independent of amount of imagens. But the way it is, the more images, the faster each passes.

How to fix this?

Where I’m going wrong in lógica?

That one snippet is best viewed on Firefox!

$(document).ready(function(e) {

  var tempoTransicao = 20;
  var quantasImagens = $("div.slider ul.slide li img").size();
  var tamanhoIntervalos = 100/quantasImagens;
  var tempoImagens = 0;
  var t = 0;	
  var tMax = 0;	
  
  var obj = new Array();
  
  for (i = 0; i < quantasImagens; i++) {
  
	tMin = tMax;
	tMax += tamanhoIntervalos;
  
	obj[tMin + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
	obj[tMax + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
	
	tempoImagens += 100;
	
  }	  
  
  console.log(obj);

  $.keyframe.define([
		$.extend(
		  { name: 'tocaSlide' }, 
			 obj
		  )
  ]);
  
  $("div.slider ul.slide").css({
		'animation-duration' : tempoTransicao + 's',
  });
  
});

  * {	  
	  margin:0;
	  padding:0;
	  boder: none;
  }
  body {
	  width:1000px;
	  margin: auto;
  }
  div.slider {
	  width:100%;
	  overflow:hidden;
  }
  div.slider ul.slide {
	  width:5000%;
	  animation:tocaSlide infinite;
  }  
  div.slider ul.slide li {
	  width:100%;
	  list-style:none;
  }
  div.slider ul.slide li img {
	  float:left;
  }
  @keyframes tocaSlide {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src='http://www.hotplateprensas.com.br/estilos/_js/jquery.keyframes.min.js'></script>

  <div class="slider">
    <ul class="slide">
      <li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png" /></li>
      <li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" /></li>
      <li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png" /></li>
      <li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/4.png" /></li>
      <li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png" /></li>
      <li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" /></li>
      <li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png" /></li>
      <li><img src="http://www.hotplateprensas.com.br/estilos/_imgs/_slideShow/4.png" /></li>
    </ul>
  </div>