jQuery addClass example

Change class name on click in jQuery

by crucify

HTML

<div class="box">
  <p>Hello World</p>
</div>

<!-- 
box가 서서히 커지는 에니메이션 실행시간은 3초, 
실행 3초 후 2초마다 애니메이션 반복

-->

CSS

*{margin:0;padding:0;}

.box{
  width:500px;
  height:250px;
  margin:10% auto 0;
  background:pink;
  line-height:250px;
  font-size:20px;
  text-align:center;
}

.animate{
  animation: ani 5s ease infinite;
}

@keyframes ani {
  0 {transform: scale(1.1);opacity:0;}
  30% {transform: scale(1.2);}
  60% {transform: scale(1.1); background:skyblue;opacity:1;}
  60.1% {transform: scale(1.1);background:pink;opacity:0;}
  100% {transform: scale(1.1);background:pink;opacity:0;}
}

JavaScript

$(function(){
  //setInterval(function(){
    $('.box').toggleClass('animate');
  //},2000);
});