KineticJS - Transition

Bonjour à tous,

Avant tous, je tiens à préciser que je ne suis qu'à l'apprentissage du JS (principalement Jquery).
Actuellement entrain de réaliser un projet personnel, j'ai besoin pour cela de créer une genre de grille avec laquelle chaque bloc aurait un état hover. Cependant, ayant besoin de beaucoup de bloc je suis venu à utiliser des Canvas. Je découvre depuis quelques jours de plus en plus de chose et j'ai réussis à créer ma fameuse grille et à effectuer un état hover également.
Cependant je bloque sur la transition que je voudrais réaliser sur cet état hover, c'est donc pour cette raison que je fais appel à votre aide.

Voici mon code actuel.
Merci d'avance

<script src="kinetic-v5.0.2.min.js"></script>
<script defer="defer">
  var stage = new Kinetic.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
  });
 
  var layer = new Kinetic.Layer();
  var numSquareX = window.innerWidth / 24;
  var numSquareY = window.innerHeight / 24;
 
  for (var i = 0; i < numSquareX; i++) {
  for (var a = 0; a < numSquareY; a++) {
 
    var rect = new Kinetic.Rect({
      x: i * 24,
      y: a * 24,
      width: 21,
      height: 21,
      stroke: '#ddd',
      lineCap: "round",
      strokeWidth: 1
    });
    layer.add(rect);      
 
  var tween = new Kinetic.Tween({
    node: rect,
    fill: 'blue',
    duration: 5
  }); 
  rect.on('mouseover', function() {
      tween.play();
  });         
  rect.on('mouseout', function() {
      tween.reverse();
  });

  };
  };
 

 
  stage.add(layer);
</script>