Slick Animate

by jimmyt1001

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<div class="product">

</div>

<div class="change">
 Click me
</div>

CSS

div {
        width: 200px;
        height: 200px;
        background-color:red;
    }
    
    .product {

        transform: rotate(0deg);
    }


    .product-ani {

        transform: rotate(0deg);
        -webkit-animation-name: prodani;
        -webkit-animation-duration:6s;
        animation-name: prodani;
        animation-duration: 6s;
        animation-fill-mode: forwards;
    }


    @-webkit-keyframes prodani {
        from {transform: rotate(0deg);}
        to {transform: rotate(40deg);}
    }

    @keyframes prodani {
        from {transform: rotate(0deg);}
        to {transform: rotate(40deg);}
    }

JavaScript

$(".change" ).click(function() {
 $(".product").addClass("product-ani");
  $(".product").removeClass("product");
});