jQuery addClass example

Change class name on click in jQuery

by AJIEKCEU

HTML

<script src="https://static.tildacdn.com/js/tilda-animation-1.0.min.js"></script>
<script src="https://static.tildacdn.com/js/tilda-animation-ext-1.0.min.js"></script>
<script src="https://static.tildacdn.com/js/tilda-animation-sbs-1.0.min.js"></script>

<body class="t-body">

<div id="rec141297407" class="r t-rec" style=" " data-animationappear="off" data-record-type="396">

  <div class="t396">
  <div class="t396__artboard rendered" data-artboard-recid="141297407" data-artboard-height="750" data-artboard-height-res-320="1250" data-artboard-height_vh="100" data-artboard-valign="center" data-artboard-ovrflw="" data-artboard-proxy-min-offset-top="93.5" data-artboard-proxy-min-height="750" data-artboard-proxy-max-height="937">

  <div class="t396__elem tn-elem tn-elem__1412974071573652186722 t-sbs-anim_started" data-elem-id="1573652186722" data-elem-type="image" data-field-top-value="465" data-field-top-res-320-value="868" data-field-left-value="660" data-field-left-res-320-value="1365" data-field-width-value="110" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="" data-field-leftunits-value="" data-field-heightunits-value="" data-field-widthunits-value="" data-animate-sbs-event="intoview" data-animate-sbs-trg="1" data-animate-sbs-trgofst="0" data-animate-sbs-loop="loop" data-animate-sbs-opts="[{'ti':'0','mx':'0','my':'0','sx':'1','sy':'1','op':'1','ro':'0','bl':'0','ea':'','dt':'0'},{'ti':800,'mx':-50,'my':-160,'sx':1.05,'sy':1.05,'op':0,'ro':'0','bl':'0','ea':'','dt':'0'}]" data-fields="img,width,filewidth,fileheight,top,left,container,axisx,axisy,widthunits,leftunits,topunits" style="left: 697px; top: 558.5px; width: 110px;"> <div class="tn-atom__sbs-anim-wrapper" style="display:table; width:inherit; height:inherit;"><div class="tn-atom"> <img class="tn-atom__img t-img loaded" data-original="https://static.tildacdn.com/tild3266-6262-4438-b536-303836326537/291236398052211.png"...

CSS

#rec141297407 [data-elem-id="1573651966879"].t-sbs-anim_started .tn-atom__sbs-anim-wrapper {
animation: sbs-anim-rec141297407-1573651966879 1s infinite linear;
backface-visibility: hidden;
}

@keyframes sbs-anim-rec141297407-1573651966879 {
0% {opacity:1;transform:translateX(0px)translateY(0px)rotate(0deg)scale(1,1);animation-timing-function:linear;}
100% {opacity:0;transform:translateX(0px)translateY(-160px)rotate(0deg)scale(1,1);}
}

#rec141297407 [data-elem-id="1573652057997"].t-sbs-anim_started .tn-atom__sbs-anim-wrapper {
animation: sbs-anim-rec141297407-1573652057997 1.6s infinite linear;
backface-visibility: hidden;
}

@keyframes sbs-anim-rec141297407-1573652057997 {
0% {opacity:1;transform:translateX(0px)translateY(0px)rotate(0deg)scale(1,1);animation-timing-function:linear;}
100% {opacity:0;transform:translateX(60px)translateY(-160px)rotate(0deg)scale(1.05,1.05);}
}

#rec141297407 [data-elem-id="1573652186722"].t-sbs-anim_started .tn-atom__sbs-anim-wrapper {
animation: sbs-anim-rec141297407-1573652186722 0.8s infinite linear;
backface-visibility: hidden;
}

@keyframes sbs-anim-rec141297407-1573652186722 {
0% {opacity:1;transform:translateX(0px)translateY(0px)rotate(0deg)scale(1,1);animation-timing-function:linear;}
100% {opacity:0;transform:translateX(-50px)translateY(-160px)rotate(0deg)scale(1.05,1.05);}
}

#rec141297407 [data-elem-id="1573733991021"].t-sbs-anim_started .tn-atom__sbs-anim-wrapper {
animation: sbs-anim-rec141297407-1573733991021 5s infinite linear;
backface-visibility: hidden;
}

@keyframes sbs-anim-rec141297407-1573733991021 {
0% {opacity:1;transform:translateX(0px)translateY(0px)rotate(0deg)scale(1,1);animation-timing-function:linear;}
100% {opacity:0.85;transform:translateX(0px)translateY(0px)rotate(360deg)scale(1,1);}
}