jQuery addClass example

Change class name on click in jQuery

by Miklos Nagy

HTML

<div class="elem elem1 anim-floatin"></div>

<div class="elem elem2 anim-floatin"></div>

<div class="elem elem3 anim-floatin"></div>

<div class="elem elem4 anim-floatin"></div>

CSS

.anim-floatin:hover{animation:none;}

.anim-floatin:nth-child(1){
animation-delay:1s;
}

.anim-floatin:nth-child(2){
animation-delay:2s;
}

.anim-floatin:nth-child(3){
animation-delay:3s;
}

.anim-floatin:nth-child(4){
animation-delay:3s;
}

.anim-floatin:nth-child(5){
animation-delay:3s;
}

.anim-floatin{
transform: translatey(0px);
animation: floatin 6s ease-in-out infinite;
}

@keyframes floatin {
	0% {
		
		transform: translatey(0px);
	}
	50% {
		
		transform: translatey(-10px);
	}
	100% {
		
		transform: translatey(0px);
	}
}

.elem{
  width:200px;
  height:200px;
  position:relative;
  display:-webkit-box;
  padding:20px;
  margin: 10px auto;
}

.elem1{background:red;}
.elem2{background:green;}
.elem3{background:blue;}