[jQuery] lyrics auto count animation

html

<div class="lyrics_wrap">
    <div class="lyrics_conbox">
        <div class="lyrics_count js_lyrics_count">
            <span>3</span>
        </div>
        <div class="lyrics_top">
            <span><img src="img_main_lyric_1.png" alt="lyrics line 1"></span>
        </div>
        <div class="lyrics_bottom">
            <span><img src="img_main_lyric_2.png" alt="lyrics line 2"></span>
        </div>
    </div>
</div>

 

 

css

.lyrics_count{
	width: 345px;
	margin: 0 auto;
	text-align: left;
}
.lyrics_count span{
	display: inline-block;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
	color: #000;
	font-size: 16px;
	font-weight: 700;
	vertical-align: middle;
}
.lyrics_count span + span{
	margin-left: 6px;
}
.lyrics_conbox{
	padding: 25px 0;
	background: url('img_main_lyric_shadow.png') no-repeat center;
}
.lyrics_top{
	position: relative;
	width: 395px;
	margin: -10px auto 0;
}
.lyrics_top span{
	display: inline-block;
	position: relative;
}
.lyrics_top span:after{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	/* width: 174px; */
	height: 82px;
	background: url('img_main_lyric_1_on.png') top left;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	-webkit-perspective: 1000;
	animation: lyrics 2.4s 0.5s linear forwards;
}
.lyrics_bottom{
	margin: -30px auto 0;
	text-align: center;
}
@keyframes lyrics{
	to{width: 174px;}
}

 

 

js

// lyrics auto count
function lyricsCount(){
    setInterval(function(){
        let countNum = $('.js_lyrics_count span').html();
        let counter = parseInt(countNum);
        if (counter !== 0) {
            $('.js_lyrics_count span').html(counter - 1);
        }
    }, 600);
};