[jQuery/slick] 슬릭 슬라이더 내 텍스트에 애니메이션 주기

html

<div class="visual-con visual-con01 on">
	<img src="/include/img/main-visual01.png" alt="" class="t-show">
    <img src="" alt="" class="m-show">
	<div class="visual-text">
		<h2>title</h2>
		<span>sub title</span>
	</div>
</div>
<div class="visual-con visual-con02">
	<img src="/include/img/main-visual01.png" alt="" class="t-show">
    <img src="" alt="" class="m-show">
	<div class="visual-text">
		<h2>title</h2>
		<span>sub title</span>
	</div>
</div>
<div class="visual-con visual-con03">
	<img src="/include/img/main-visual01.png" alt="" class="t-show">
    <img src="" alt="" class="m-show">
	<div class="visual-text">
		<h2>title</h2>
		<span>sub title</span>
	</div>
</div>

 

css

.slick-slide.on .visual-text h2{-webkit-animation:visualTextUp 0.5s linear forwards;animation:visualTextUp 0.5s linear forwards;}
.slick-slide.on .visual-text span{-webkit-animation:visualTextUp 0.5s .7s linear forwards;animation:visualTextUp 0.5s .7s linear forwards;}
.slick-slide.on .visual-text h2, .visual .slick-slide.on .visual-text strong, .visual .slick-slide.on .visual-text span{-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-webkit-perspective: 1000;-webkit-backface-visibility: hidden;}

 

jQuery

$('.visual').on('beforeChange', function (event, slick, currentSlide) {
    $('.slick-slide').removeClass('on');
});	
$('.visual').on('afterChange', function (event, slick, currentSlide) {
    $('.slick-slide').removeClass('on');
    $('.slick-current').addClass('on');
});