两个 class 之间的动画颜色

Question

我想在鼠标离开方块后用动画设置颜色从灰色渐变为粉红色。

但是我尝试在两个类之间设置动画，但似乎不起作用。

如有任何帮助，我们将不胜感激。

$('.blocks').mouseenter(function(){
  $(this).addClass('current');
  setTimeout(function(){
   //$(this).animate('.current',null); //this line is not working
  },1500);
 });

.playboard{
  width: 330px;
 }
 .blocks
 {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color:pink;

 }
 .blocks.current{
  background-color:grey;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard"><div class="blocks" data-x="0" data-y="0"></div><div class="blocks" data-x="0" data-y="1"></div><div class="blocks" data-x="0" data-y="2"></div><div class="blocks" data-x="0" data-y="3"></div><div class="blocks" data-x="0" data-y="4"></div><div class="blocks" data-x="0" data-y="5"></div><div class="blocks" data-x="0" data-y="6"></div><div class="blocks" data-x="0" data-y="7"></div><div class="blocks" data-x="0" data-y="8"></div><div class="blocks" data-x="0" data-y="9"></div><div class="blocks" data-x="0" data-y="10"></div><div class="blocks" data-x="1" data-y="0"></div><div class="blocks" data-x="1" data-y="1"></div><div class="blocks" data-x="1" data-y="2"></div><div class="blocks" data-x="1" data-y="3"></div><div class="blocks" data-x="1" data-y="4"></div><div class="blocks" data-x="1" data-y="5"></div><div class="blocks" data-x="1" data-y="6"></div><div class="blocks" data-x="1" data-y="7"></div><div class="blocks" data-x="1" data-y="8"></div><div class="blocks" data-x="1" data-y="9"></div><div class="blocks" data-x="1" data-y="10"></div><div class="blocks" data-x="2" data-y="0"></div><div class="blocks" data-x="2" data-y="1"></div><div class="blocks" data-x="2" data-y="2"></div><div class="blocks" data-x="2" data-y="3"></div><div class="blocks" data-x="2" data-y="4"></div><div class="blocks" data-x="2" data-y="5"></div><div class="blocks" data-x="2" data-y="6"></div><div class="blocks" data-x="2" data-y="7"></div><div class="blocks" data-x="2" data-y="8"></div><div class="blocks" data-x="2" data-y="9"></div><div class="blocks" data-x="2" data-y="10"></div><div class="blocks" data-x="3" data-y="0"></div><div class="blocks" data-x="3" data-y="1"></div><div class="blocks" data-x="3" data-y="2"></div><div class="blocks" data-x="3" data-y="3"></div><div class="blocks" data-x="3" data-y="4"></div><div class="blocks" data-x="3" data-y="5"></div><div class="blocks" data-x="3" data-y="6"></div><div class="blocks" data-x="3" data-y="7"></div><div class="blocks" data-x="3" data-y="8"></div><div class="blocks" data-x="3" data-y="9"></div><div class="blocks" data-x="3" data-y="10"></div><div class="blocks" data-x="4" data-y="0"></div><div class="blocks" data-x="4" data-y="1"></div><div class="blocks" data-x="4" data-y="2"></div><div class="blocks" data-x="4" data-y="3"></div><div class="blocks" data-x="4" data-y="4"></div><div class="blocks" data-x="4" data-y="5"></div><div class="blocks" data-x="4" data-y="6"></div><div class="blocks" data-x="4" data-y="7"></div><div class="blocks" data-x="4" data-y="8"></div><div class="blocks" data-x="4" data-y="9"></div><div class="blocks" data-x="4" data-y="10"></div><div class="blocks" data-x="5" data-y="0"></div><div class="blocks" data-x="5" data-y="1"></div><div class="blocks" data-x="5" data-y="2"></div><div class="blocks" data-x="5" data-y="3"></div><div class="blocks" data-x="5" data-y="4"></div><div class="blocks" data-x="5" data-y="5"></div><div class="blocks" data-x="5" data-y="6"></div><div class="blocks" data-x="5" data-y="7"></div><div class="blocks" data-x="5" data-y="8"></div><div class="blocks" data-x="5" data-y="9"></div><div class="blocks" data-x="5" data-y="10"></div><div class="blocks" data-x="6" data-y="0"></div><div class="blocks" data-x="6" data-y="1"></div><div class="blocks" data-x="6" data-y="2"></div><div class="blocks" data-x="6" data-y="3"></div><div class="blocks" data-x="6" data-y="4"></div><div class="blocks" data-x="6" data-y="5"></div><div class="blocks" data-x="6" data-y="6"></div><div class="blocks" data-x="6" data-y="7"></div><div class="blocks" data-x="6" data-y="8"></div><div class="blocks" data-x="6" data-y="9"></div><div class="blocks" data-x="6" data-y="10"></div><div class="blocks" data-x="7" data-y="0"></div><div class="blocks" data-x="7" data-y="1"></div><div class="blocks" data-x="7" data-y="2"></div><div class="blocks" data-x="7" data-y="3"></div><div class="blocks" data-x="7" data-y="4"></div><div class="blocks" data-x="7" data-y="5"></div><div class="blocks" data-x="7" data-y="6"></div><div class="blocks" data-x="7" data-y="7"></div><div class="blocks" data-x="7" data-y="8"></div><div class="blocks" data-x="7" data-y="9"></div><div class="blocks" data-x="7" data-y="10"></div><div class="blocks" data-x="8" data-y="0"></div><div class="blocks" data-x="8" data-y="1"></div><div class="blocks" data-x="8" data-y="2"></div><div class="blocks" data-x="8" data-y="3"></div><div class="blocks" data-x="8" data-y="4"></div><div class="blocks" data-x="8" data-y="5"></div><div class="blocks" data-x="8" data-y="6"></div><div class="blocks" data-x="8" data-y="7"></div><div class="blocks" data-x="8" data-y="8"></div><div class="blocks" data-x="8" data-y="9"></div><div class="blocks" data-x="8" data-y="10"></div><div class="blocks" data-x="9" data-y="0"></div><div class="blocks" data-x="9" data-y="1"></div><div class="blocks" data-x="9" data-y="2"></div><div class="blocks" data-x="9" data-y="3"></div><div class="blocks" data-x="9" data-y="4"></div><div class="blocks" data-x="9" data-y="5"></div><div class="blocks" data-x="9" data-y="6"></div><div class="blocks" data-x="9" data-y="7"></div><div class="blocks" data-x="9" data-y="8"></div><div class="blocks" data-x="9" data-y="9"></div><div class="blocks" data-x="9" data-y="10"></div><div class="blocks" data-x="10" data-y="0"></div><div class="blocks" data-x="10" data-y="1"></div><div class="blocks" data-x="10" data-y="2"></div><div class="blocks" data-x="10" data-y="3"></div><div class="blocks" data-x="10" data-y="4"></div><div class="blocks" data-x="10" data-y="5"></div><div class="blocks" data-x="10" data-y="6"></div><div class="blocks" data-x="10" data-y="7"></div><div class="blocks" data-x="10" data-y="8"></div><div class="blocks" data-x="10" data-y="9"></div><div class="blocks" data-x="10" data-y="10"></div></div>

Answer 1

这是你想要的吗？

演示

$('.blocks').mouseenter(function() {
  var $this = $(this);
  $this.addClass('current');
  setTimeout(function() {
    $this.addClass("Done")
  }, 1900);
});

.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
}

.blocks.current:not(.Done) {
  background-color: grey;
  animation-name: blackWhite;
  animation-duration: 2s;
}

@-webkit-keyframes blackWhite {
  0% {
    background-color: grey;
  }
  50% {
    background-color: grey;
  }
  51% {
    background-color: grey;
  }
  100% {
    background-color: pink;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard">
  <div class="blocks" data-x="0" data-y="0"></div>
  <div class="blocks" data-x="0" data-y="1"></div>
  <div class="blocks" data-x="0" data-y="2"></div>
  <div class="blocks" data-x="0" data-y="3"></div>
  <div class="blocks" data-x="0" data-y="4"></div>
  <div class="blocks" data-x="0" data-y="5"></div>
  <div class="blocks" data-x="0" data-y="6"></div>
  <div class="blocks" data-x="0" data-y="7"></div>
  <div class="blocks" data-x="0" data-y="8"></div>
  <div class="blocks" data-x="0" data-y="9"></div>
  <div class="blocks" data-x="0" data-y="10"></div>
  <div class="blocks" data-x="1" data-y="0"></div>
  <div class="blocks" data-x="1" data-y="1"></div>
  <div class="blocks" data-x="1" data-y="2"></div>
  <div class="blocks" data-x="1" data-y="3"></div>
  <div class="blocks" data-x="1" data-y="4"></div>
  <div class="blocks" data-x="1" data-y="5"></div>
  <div class="blocks" data-x="1" data-y="6"></div>
  <div class="blocks" data-x="1" data-y="7"></div>
  <div class="blocks" data-x="1" data-y="8"></div>
  <div class="blocks" data-x="1" data-y="9"></div>
  <div class="blocks" data-x="1" data-y="10"></div>
  <div class="blocks" data-x="2" data-y="0"></div>
  <div class="blocks" data-x="2" data-y="1"></div>
  <div class="blocks" data-x="2" data-y="2"></div>
  <div class="blocks" data-x="2" data-y="3"></div>
  <div class="blocks" data-x="2" data-y="4"></div>
  <div class="blocks" data-x="2" data-y="5"></div>
  <div class="blocks" data-x="2" data-y="6"></div>
  <div class="blocks" data-x="2" data-y="7"></div>
  <div class="blocks" data-x="2" data-y="8"></div>
  <div class="blocks" data-x="2" data-y="9"></div>
  <div class="blocks" data-x="2" data-y="10"></div>
  <div class="blocks" data-x="3" data-y="0"></div>
  <div class="blocks" data-x="3" data-y="1"></div>
  <div class="blocks" data-x="3" data-y="2"></div>
  <div class="blocks" data-x="3" data-y="3"></div>
  <div class="blocks" data-x="3" data-y="4"></div>
  <div class="blocks" data-x="3" data-y="5"></div>
  <div class="blocks" data-x="3" data-y="6"></div>
  <div class="blocks" data-x="3" data-y="7"></div>
  <div class="blocks" data-x="3" data-y="8"></div>
  <div class="blocks" data-x="3" data-y="9"></div>
  <div class="blocks" data-x="3" data-y="10"></div>
  <div class="blocks" data-x="4" data-y="0"></div>
  <div class="blocks" data-x="4" data-y="1"></div>
  <div class="blocks" data-x="4" data-y="2"></div>
  <div class="blocks" data-x="4" data-y="3"></div>
  <div class="blocks" data-x="4" data-y="4"></div>
  <div class="blocks" data-x="4" data-y="5"></div>
  <div class="blocks" data-x="4" data-y="6"></div>
  <div class="blocks" data-x="4" data-y="7"></div>
  <div class="blocks" data-x="4" data-y="8"></div>
  <div class="blocks" data-x="4" data-y="9"></div>
  <div class="blocks" data-x="4" data-y="10"></div>
  <div class="blocks" data-x="5" data-y="0"></div>
  <div class="blocks" data-x="5" data-y="1"></div>
  <div class="blocks" data-x="5" data-y="2"></div>
  <div class="blocks" data-x="5" data-y="3"></div>
  <div class="blocks" data-x="5" data-y="4"></div>
  <div class="blocks" data-x="5" data-y="5"></div>
  <div class="blocks" data-x="5" data-y="6"></div>
  <div class="blocks" data-x="5" data-y="7"></div>
  <div class="blocks" data-x="5" data-y="8"></div>
  <div class="blocks" data-x="5" data-y="9"></div>
  <div class="blocks" data-x="5" data-y="10"></div>
  <div class="blocks" data-x="6" data-y="0"></div>
  <div class="blocks" data-x="6" data-y="1"></div>
  <div class="blocks" data-x="6" data-y="2"></div>
  <div class="blocks" data-x="6" data-y="3"></div>
  <div class="blocks" data-x="6" data-y="4"></div>
  <div class="blocks" data-x="6" data-y="5"></div>
  <div class="blocks" data-x="6" data-y="6"></div>
  <div class="blocks" data-x="6" data-y="7"></div>
  <div class="blocks" data-x="6" data-y="8"></div>
  <div class="blocks" data-x="6" data-y="9"></div>
  <div class="blocks" data-x="6" data-y="10"></div>
  <div class="blocks" data-x="7" data-y="0"></div>
  <div class="blocks" data-x="7" data-y="1"></div>
  <div class="blocks" data-x="7" data-y="2"></div>
  <div class="blocks" data-x="7" data-y="3"></div>
  <div class="blocks" data-x="7" data-y="4"></div>
  <div class="blocks" data-x="7" data-y="5"></div>
  <div class="blocks" data-x="7" data-y="6"></div>
  <div class="blocks" data-x="7" data-y="7"></div>
  <div class="blocks" data-x="7" data-y="8"></div>
  <div class="blocks" data-x="7" data-y="9"></div>
  <div class="blocks" data-x="7" data-y="10"></div>
  <div class="blocks" data-x="8" data-y="0"></div>
  <div class="blocks" data-x="8" data-y="1"></div>
  <div class="blocks" data-x="8" data-y="2"></div>
  <div class="blocks" data-x="8" data-y="3"></div>
  <div class="blocks" data-x="8" data-y="4"></div>
  <div class="blocks" data-x="8" data-y="5"></div>
  <div class="blocks" data-x="8" data-y="6"></div>
  <div class="blocks" data-x="8" data-y="7"></div>
  <div class="blocks" data-x="8" data-y="8"></div>
  <div class="blocks" data-x="8" data-y="9"></div>
  <div class="blocks" data-x="8" data-y="10"></div>
  <div class="blocks" data-x="9" data-y="0"></div>
  <div class="blocks" data-x="9" data-y="1"></div>
  <div class="blocks" data-x="9" data-y="2"></div>
  <div class="blocks" data-x="9" data-y="3"></div>
  <div class="blocks" data-x="9" data-y="4"></div>
  <div class="blocks" data-x="9" data-y="5"></div>
  <div class="blocks" data-x="9" data-y="6"></div>
  <div class="blocks" data-x="9" data-y="7"></div>
  <div class="blocks" data-x="9" data-y="8"></div>
  <div class="blocks" data-x="9" data-y="9"></div>
  <div class="blocks" data-x="9" data-y="10"></div>
  <div class="blocks" data-x="10" data-y="0"></div>
  <div class="blocks" data-x="10" data-y="1"></div>
  <div class="blocks" data-x="10" data-y="2"></div>
  <div class="blocks" data-x="10" data-y="3"></div>
  <div class="blocks" data-x="10" data-y="4"></div>
  <div class="blocks" data-x="10" data-y="5"></div>
  <div class="blocks" data-x="10" data-y="6"></div>
  <div class="blocks" data-x="10" data-y="7"></div>
  <div class="blocks" data-x="10" data-y="8"></div>
  <div class="blocks" data-x="10" data-y="9"></div>
  <div class="blocks" data-x="10" data-y="10"></div>
</div>

这将在 1.5 秒后删除 current class。

$('.blocks').mouseenter(function() {
  var $this = $(this);
  $this.addClass('current');
  setTimeout(function() {
    $this.removeClass("current")
  }, 2000);
});

将它与结合，使其随时间变化成多种颜色。

.blocks.current {
  background-color: grey;
  animation-name: blackWhite;
  animation-duration: 2s;
}

@-webkit-keyframes blackWhite {
  0% {
    background-color: white;
  }
  50% {
    background-color: blue;
  }
  51% {
    background-color: grey;
  }
  100% {
    background-color: pink;
  }
}

Answer 2

$('.blocks').mouseenter(function() {
  $(this).addClass('current');
  setTimeout(function() {
    //$(this).aniamate('.current',null); //this line is not working
  }, 1500);
});
$('.blocks').mouseleave(function() {
  $(this).removeClass('current');
  $(this).animate({
    opacity: 0.5
  }, 'fast', function() {
    $(this)
      .removeClass('current')
      .animate({
        opacity: 1
      });
  });
});

.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
}

.blocks.current {
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard">
  <div class="blocks" data-x="0" data-y="0"></div>
  <div class="blocks" data-x="0" data-y="1"></div>
  <div class="blocks" data-x="0" data-y="2"></div>
  <div class="blocks" data-x="0" data-y="3"></div>
  <div class="blocks" data-x="0" data-y="4"></div>
  <div class="blocks" data-x="0" data-y="5"></div>
  <div class="blocks" data-x="0" data-y="6"></div>
  <div class="blocks" data-x="0" data-y="7"></div>
  <div class="blocks" data-x="0" data-y="8"></div>
  <div class="blocks" data-x="0" data-y="9"></div>
  <div class="blocks" data-x="0" data-y="10"></div>
  <div class="blocks" data-x="1" data-y="0"></div>
  <div class="blocks" data-x="1" data-y="1"></div>
  <div class="blocks" data-x="1" data-y="2"></div>
  <div class="blocks" data-x="1" data-y="3"></div>
  <div class="blocks" data-x="1" data-y="4"></div>
  <div class="blocks" data-x="1" data-y="5"></div>
  <div class="blocks" data-x="1" data-y="6"></div>
  <div class="blocks" data-x="1" data-y="7"></div>
  <div class="blocks" data-x="1" data-y="8"></div>
  <div class="blocks" data-x="1" data-y="9"></div>
  <div class="blocks" data-x="1" data-y="10"></div>
  <div class="blocks" data-x="2" data-y="0"></div>
  <div class="blocks" data-x="2" data-y="1"></div>
  <div class="blocks" data-x="2" data-y="2"></div>
  <div class="blocks" data-x="2" data-y="3"></div>
  <div class="blocks" data-x="2" data-y="4"></div>
  <div class="blocks" data-x="2" data-y="5"></div>
  <div class="blocks" data-x="2" data-y="6"></div>
  <div class="blocks" data-x="2" data-y="7"></div>
  <div class="blocks" data-x="2" data-y="8"></div>
  <div class="blocks" data-x="2" data-y="9"></div>
  <div class="blocks" data-x="2" data-y="10"></div>
  <div class="blocks" data-x="3" data-y="0"></div>
  <div class="blocks" data-x="3" data-y="1"></div>
  <div class="blocks" data-x="3" data-y="2"></div>
  <div class="blocks" data-x="3" data-y="3"></div>
  <div class="blocks" data-x="3" data-y="4"></div>
  <div class="blocks" data-x="3" data-y="5"></div>
  <div class="blocks" data-x="3" data-y="6"></div>
  <div class="blocks" data-x="3" data-y="7"></div>
  <div class="blocks" data-x="3" data-y="8"></div>
  <div class="blocks" data-x="3" data-y="9"></div>
  <div class="blocks" data-x="3" data-y="10"></div>
  <div class="blocks" data-x="4" data-y="0"></div>
  <div class="blocks" data-x="4" data-y="1"></div>
  <div class="blocks" data-x="4" data-y="2"></div>
  <div class="blocks" data-x="4" data-y="3"></div>
  <div class="blocks" data-x="4" data-y="4"></div>
  <div class="blocks" data-x="4" data-y="5"></div>
  <div class="blocks" data-x="4" data-y="6"></div>
  <div class="blocks" data-x="4" data-y="7"></div>
  <div class="blocks" data-x="4" data-y="8"></div>
  <div class="blocks" data-x="4" data-y="9"></div>
  <div class="blocks" data-x="4" data-y="10"></div>
  <div class="blocks" data-x="5" data-y="0"></div>
  <div class="blocks" data-x="5" data-y="1"></div>
  <div class="blocks" data-x="5" data-y="2"></div>
  <div class="blocks" data-x="5" data-y="3"></div>
  <div class="blocks" data-x="5" data-y="4"></div>
  <div class="blocks" data-x="5" data-y="5"></div>
  <div class="blocks" data-x="5" data-y="6"></div>
  <div class="blocks" data-x="5" data-y="7"></div>
  <div class="blocks" data-x="5" data-y="8"></div>
  <div class="blocks" data-x="5" data-y="9"></div>
  <div class="blocks" data-x="5" data-y="10"></div>
  <div class="blocks" data-x="6" data-y="0"></div>
  <div class="blocks" data-x="6" data-y="1"></div>
  <div class="blocks" data-x="6" data-y="2"></div>
  <div class="blocks" data-x="6" data-y="3"></div>
  <div class="blocks" data-x="6" data-y="4"></div>
  <div class="blocks" data-x="6" data-y="5"></div>
  <div class="blocks" data-x="6" data-y="6"></div>
  <div class="blocks" data-x="6" data-y="7"></div>
  <div class="blocks" data-x="6" data-y="8"></div>
  <div class="blocks" data-x="6" data-y="9"></div>
  <div class="blocks" data-x="6" data-y="10"></div>
  <div class="blocks" data-x="7" data-y="0"></div>
  <div class="blocks" data-x="7" data-y="1"></div>
  <div class="blocks" data-x="7" data-y="2"></div>
  <div class="blocks" data-x="7" data-y="3"></div>
  <div class="blocks" data-x="7" data-y="4"></div>
  <div class="blocks" data-x="7" data-y="5"></div>
  <div class="blocks" data-x="7" data-y="6"></div>
  <div class="blocks" data-x="7" data-y="7"></div>
  <div class="blocks" data-x="7" data-y="8"></div>
  <div class="blocks" data-x="7" data-y="9"></div>
  <div class="blocks" data-x="7" data-y="10"></div>
  <div class="blocks" data-x="8" data-y="0"></div>
  <div class="blocks" data-x="8" data-y="1"></div>
  <div class="blocks" data-x="8" data-y="2"></div>
  <div class="blocks" data-x="8" data-y="3"></div>
  <div class="blocks" data-x="8" data-y="4"></div>
  <div class="blocks" data-x="8" data-y="5"></div>
  <div class="blocks" data-x="8" data-y="6"></div>
  <div class="blocks" data-x="8" data-y="7"></div>
  <div class="blocks" data-x="8" data-y="8"></div>
  <div class="blocks" data-x="8" data-y="9"></div>
  <div class="blocks" data-x="8" data-y="10"></div>
  <div class="blocks" data-x="9" data-y="0"></div>
  <div class="blocks" data-x="9" data-y="1"></div>
  <div class="blocks" data-x="9" data-y="2"></div>
  <div class="blocks" data-x="9" data-y="3"></div>
  <div class="blocks" data-x="9" data-y="4"></div>
  <div class="blocks" data-x="9" data-y="5"></div>
  <div class="blocks" data-x="9" data-y="6"></div>
  <div class="blocks" data-x="9" data-y="7"></div>
  <div class="blocks" data-x="9" data-y="8"></div>
  <div class="blocks" data-x="9" data-y="9"></div>
  <div class="blocks" data-x="9" data-y="10"></div>
  <div class="blocks" data-x="10" data-y="0"></div>
  <div class="blocks" data-x="10" data-y="1"></div>
  <div class="blocks" data-x="10" data-y="2"></div>
  <div class="blocks" data-x="10" data-y="3"></div>
  <div class="blocks" data-x="10" data-y="4"></div>
  <div class="blocks" data-x="10" data-y="5"></div>
  <div class="blocks" data-x="10" data-y="6"></div>
  <div class="blocks" data-x="10" data-y="7"></div>
  <div class="blocks" data-x="10" data-y="8"></div>
  <div class="blocks" data-x="10" data-y="9"></div>
  <div class="blocks" data-x="10" data-y="10"></div>
</div>

Answer 3

.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
  transition: 150ms background-color;
}

.blocks:hover {
  background-color: grey;
}

.blocks.current {
  background-color: grey;
}

<div class="playboard">
  <div class="blocks" data-x="0" data-y="0"></div>
  <div class="blocks" data-x="0" data-y="1"></div>
  <div class="blocks" data-x="0" data-y="2"></div>
  <div class="blocks" data-x="0" data-y="3"></div>
  <div class="blocks" data-x="0" data-y="4"></div>
  <div class="blocks" data-x="0" data-y="5"></div>
  <div class="blocks" data-x="0" data-y="6"></div>
  <div class="blocks" data-x="0" data-y="7"></div>
  <div class="blocks" data-x="0" data-y="8"></div>
  <div class="blocks" data-x="0" data-y="9"></div>
  <div class="blocks" data-x="0" data-y="10"></div>
  <div class="blocks" data-x="1" data-y="0"></div>
  <div class="blocks" data-x="1" data-y="1"></div>
  <div class="blocks" data-x="1" data-y="2"></div>
  <div class="blocks" data-x="1" data-y="3"></div>
  <div class="blocks" data-x="1" data-y="4"></div>
  <div class="blocks" data-x="1" data-y="5"></div>
  <div class="blocks" data-x="1" data-y="6"></div>
  <div class="blocks" data-x="1" data-y="7"></div>
  <div class="blocks" data-x="1" data-y="8"></div>
  <div class="blocks" data-x="1" data-y="9"></div>
  <div class="blocks" data-x="1" data-y="10"></div>
  <div class="blocks" data-x="2" data-y="0"></div>
  <div class="blocks" data-x="2" data-y="1"></div>
  <div class="blocks" data-x="2" data-y="2"></div>
  <div class="blocks" data-x="2" data-y="3"></div>
  <div class="blocks" data-x="2" data-y="4"></div>
  <div class="blocks" data-x="2" data-y="5"></div>
  <div class="blocks" data-x="2" data-y="6"></div>
  <div class="blocks" data-x="2" data-y="7"></div>
  <div class="blocks" data-x="2" data-y="8"></div>
  <div class="blocks" data-x="2" data-y="9"></div>
  <div class="blocks" data-x="2" data-y="10"></div>
  <div class="blocks" data-x="3" data-y="0"></div>
  <div class="blocks" data-x="3" data-y="1"></div>
  <div class="blocks" data-x="3" data-y="2"></div>
  <div class="blocks" data-x="3" data-y="3"></div>
  <div class="blocks" data-x="3" data-y="4"></div>
  <div class="blocks" data-x="3" data-y="5"></div>
  <div class="blocks" data-x="3" data-y="6"></div>
  <div class="blocks" data-x="3" data-y="7"></div>
  <div class="blocks" data-x="3" data-y="8"></div>
  <div class="blocks" data-x="3" data-y="9"></div>
  <div class="blocks" data-x="3" data-y="10"></div>
  <div class="blocks" data-x="4" data-y="0"></div>
  <div class="blocks" data-x="4" data-y="1"></div>
  <div class="blocks" data-x="4" data-y="2"></div>
  <div class="blocks" data-x="4" data-y="3"></div>
  <div class="blocks" data-x="4" data-y="4"></div>
  <div class="blocks" data-x="4" data-y="5"></div>
  <div class="blocks" data-x="4" data-y="6"></div>
  <div class="blocks" data-x="4" data-y="7"></div>
  <div class="blocks" data-x="4" data-y="8"></div>
  <div class="blocks" data-x="4" data-y="9"></div>
  <div class="blocks" data-x="4" data-y="10"></div>
  <div class="blocks" data-x="5" data-y="0"></div>
  <div class="blocks" data-x="5" data-y="1"></div>
  <div class="blocks" data-x="5" data-y="2"></div>
  <div class="blocks" data-x="5" data-y="3"></div>
  <div class="blocks" data-x="5" data-y="4"></div>
  <div class="blocks" data-x="5" data-y="5"></div>
  <div class="blocks" data-x="5" data-y="6"></div>
  <div class="blocks" data-x="5" data-y="7"></div>
  <div class="blocks" data-x="5" data-y="8"></div>
  <div class="blocks" data-x="5" data-y="9"></div>
  <div class="blocks" data-x="5" data-y="10"></div>
  <div class="blocks" data-x="6" data-y="0"></div>
  <div class="blocks" data-x="6" data-y="1"></div>
  <div class="blocks" data-x="6" data-y="2"></div>
  <div class="blocks" data-x="6" data-y="3"></div>
  <div class="blocks" data-x="6" data-y="4"></div>
  <div class="blocks" data-x="6" data-y="5"></div>
  <div class="blocks" data-x="6" data-y="6"></div>
  <div class="blocks" data-x="6" data-y="7"></div>
  <div class="blocks" data-x="6" data-y="8"></div>
  <div class="blocks" data-x="6" data-y="9"></div>
  <div class="blocks" data-x="6" data-y="10"></div>
  <div class="blocks" data-x="7" data-y="0"></div>
  <div class="blocks" data-x="7" data-y="1"></div>
  <div class="blocks" data-x="7" data-y="2"></div>
  <div class="blocks" data-x="7" data-y="3"></div>
  <div class="blocks" data-x="7" data-y="4"></div>
  <div class="blocks" data-x="7" data-y="5"></div>
  <div class="blocks" data-x="7" data-y="6"></div>
  <div class="blocks" data-x="7" data-y="7"></div>
  <div class="blocks" data-x="7" data-y="8"></div>
  <div class="blocks" data-x="7" data-y="9"></div>
  <div class="blocks" data-x="7" data-y="10"></div>
  <div class="blocks" data-x="8" data-y="0"></div>
  <div class="blocks" data-x="8" data-y="1"></div>
  <div class="blocks" data-x="8" data-y="2"></div>
  <div class="blocks" data-x="8" data-y="3"></div>
  <div class="blocks" data-x="8" data-y="4"></div>
  <div class="blocks" data-x="8" data-y="5"></div>
  <div class="blocks" data-x="8" data-y="6"></div>
  <div class="blocks" data-x="8" data-y="7"></div>
  <div class="blocks" data-x="8" data-y="8"></div>
  <div class="blocks" data-x="8" data-y="9"></div>
  <div class="blocks" data-x="8" data-y="10"></div>
  <div class="blocks" data-x="9" data-y="0"></div>
  <div class="blocks" data-x="9" data-y="1"></div>
  <div class="blocks" data-x="9" data-y="2"></div>
  <div class="blocks" data-x="9" data-y="3"></div>
  <div class="blocks" data-x="9" data-y="4"></div>
  <div class="blocks" data-x="9" data-y="5"></div>
  <div class="blocks" data-x="9" data-y="6"></div>
  <div class="blocks" data-x="9" data-y="7"></div>
  <div class="blocks" data-x="9" data-y="8"></div>
  <div class="blocks" data-x="9" data-y="9"></div>
  <div class="blocks" data-x="9" data-y="10"></div>
  <div class="blocks" data-x="10" data-y="0"></div>
  <div class="blocks" data-x="10" data-y="1"></div>
  <div class="blocks" data-x="10" data-y="2"></div>
  <div class="blocks" data-x="10" data-y="3"></div>
  <div class="blocks" data-x="10" data-y="4"></div>
  <div class="blocks" data-x="10" data-y="5"></div>
  <div class="blocks" data-x="10" data-y="6"></div>
  <div class="blocks" data-x="10" data-y="7"></div>
  <div class="blocks" data-x="10" data-y="8"></div>
  <div class="blocks" data-x="10" data-y="9"></div>
  <div class="blocks" data-x="10" data-y="10"></div>
</div>

使用纯 Css。

两个 class 之间的动画颜色

Animate color between two class

javascript

jquery

jquery-animate