[slick] 슬라이드 롤링 시마다 애니메이션 실행

HTML

<article class="visual">
    <div class="visual-con visual-con01 on">
        <div class="visual-text">
            <h2 class="font-square"></h2>
            <strong class="font-square"></strong>
            <span></span>
        </div>
    </div>

    <div class="visual-con visual-con01 on">
        <div class="visual-text">
            <h2 class="font-square"></h2>
            <strong class="font-square"></strong>
            <span></span>
        </div>
    </div>
</article>

 

CSS

.visual .slick-slide.on .visual-text h2{-webkit-animation:visualTextUp 0.5s linear forwards;animation:visualTextUp 0.5s linear forwards;}
.visual .slick-slide.on .visual-text strong{-webkit-animation:visualTextUp 0.5s 0.7s linear forwards;animation:visualTextUp 0.5s 0.7s linear forwards;}
.visual .slick-slide.on .visual-text span{-webkit-animation:visualTextUp 0.5s 1s linear forwards;animation:visualTextUp 0.5s 1s linear forwards;}
.visual .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;}


@keyframes visualTextUp{
    from {opacity: 0;-webkit-transform:translateY(10px);transform:translateY(10px);}
    50%{opacity: 0.4;}
    to {opacity: 1;-webkit-transform:translateY(0px);transform:translateY(0px);}
}

 

jQuery

function visual(){
    $('.visual').not('.slick-initialized').slick({
        arrows: false,
        dots: true,
        autoplay: true,
        autoplaySpeed: 3000,
        speed: 1000,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
	});
    
    $('.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');
    });
}