背景画像をクロスフェードさせながらズーム、移動させる方法

背景の画像をクロスフェードで切り替えながらも
少し動きをつけるという手法に挑戦したのですが
動きはするものの、10秒くらい見てるとPCのファンがうなりをあげます。
他のサイトですとそのようなことはありません
参考サイト（http://forest-stand.com）

もしよろしければお教えいただきますと幸いです

HTML
1<div class="slider">
2	<div class="bgCrossFade"></div>
3</div>

css
1.slider{
2	width:100%;
3	height: 100%;
4	margin: 0 auto;
5	position: absolute;
6}
7.bgCrossFade {
8	position: relative;
9	height: 100%;
10}
11.bgCrossFade .slides {
12	position: absolute;
13	width: 100%;
14	height: 100%;
15	background-repeat: no-repeat;
16	background-position: center top;
17	background-size: cover;
18}
19.bgCrossFade .slides:not(:first-child) {
20	display: none;
21}
22
23.zoom_move{
24    animation: moveZoom 15s infinite linear;
25    background-size: contain;
26}
27.height_move{
28    animation: moveHeight 15s infinite linear;
29}
30
31@keyframes moveZoom{
32    0%    { transform:scale(1,1);  }
33    100%  { transform:scale(1.3,1.3); }
34}
35@keyframes moveHeight{
36    0%    { background-position: center bottom }
37    100%  { background-position: center top }
38}

javascript
1var speed = 3000; // フェードイン・フェードアウトの処理時間（1000で1秒）
2var times = 4000; // 画像切り替えの間隔（1000で1秒）
3var className = '.bgCrossFade';
4var bgArray = [
5  "images/topImage1.jpg",
6  "images/topImage2.jpg"
7  ];
8
9$.each(bgArray.reverse(), function(i, value) {
10  if(i === 0){
11    $(className).prepend('<div class="slides height_move" style="background-image:url(' + value + ');"></div>');
12  }else{
13    $(className).prepend('<div class="slides zoom_move" style="background-image:url(' + value + ');"></div>');
14  }
15});
16
17var bgNo = 1;
18var bgLength = bgArray.length;
19
20setInterval(function(){
21  $(className + ' .slides:nth-child(' + bgNo + ')').fadeOut(speed);
22  $(className + ' .slides:nth-child(' + ( bgNo === bgLength ? 1 : bgNo + 1) + ')').fadeIn(speed/3);
23  if ( bgNo >= bgLength ) {
24    bgNo = 1;
25  } else {
26    bgNo += 1;
27  }
28}, times);