CSSメソッドは瞬間的に処理されるものだと思っていたのに、ある条件で突然アニメーションになった。

要素をhoverイベントで$(".matrix").css("transform", "rotate(1000deg)");して角度を一瞬で変えたいです。
普通にやればhoverした瞬間rotate(1000deg)になります。
ただ、hoverイベントより前にsetIntervalで定期的に回転する処理をした状態でhoverイベントをすると、瞬間でなくアニメーションになります。
なぜかわかるかたいらっしゃいますでしょうか？
cssのhover擬似要素ではなく、JQueryで処理したいです。（ここから拡張する上でその必要があるため）

https://gyazo.com/2190a6117a3b876453a12474cc13f5a6

https://gyazo.com/dfee3c93b1c322d61415ff33e6b7eb64

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/reset.css">
6  <link rel="stylesheet" href="css/stylesheet.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8  <script src="main.js"></script>
9</head>
10<body>
11  <div class="matrix"></div>
12</body>
13</html>

css
1body{
2  background-color: black;
3  overflow: hidden;
4  padding: 100px;
5}
6.matrix{
7  background-color: red;
8  width: 100px;
9  height: 100px;
10  transform: rotate(0deg);
11}

js
1$(function () {
2  // transformはanimateが使えないので使えるように（ネットから引っ張ってきたものです）
3  $.fn.animate2 = function (properties, duration, ease) {
4    ease = ease || 'ease';
5    var $this = this;
6    var cssOrig = { transition: $this.css('transition') };
7    return $this.queue(next => {
8        properties['transition'] = 'all ' + duration + 'ms ' + ease;
9        $this.css(properties);
10        setTimeout(function () {
11            $this.css(cssOrig);
12            next();
13        }, duration);
14    });
15  };
16  
17  let deg = 0;
18  let rotationFunc = function() {
19    deg = deg + 45;
20    $(".matrix").stop().animate2({ transform: "rotate(" + deg + "deg)" }, 1000)
21  }
22  setInterval(rotationFunc, 1500);
23  $(".matrix").hover(function () {
24    $(".matrix").css("transform", "rotate(1000deg)");      
25  })
26});