.anim.swipe.play:after {
    transform: translateX(0%);
    z-index: -1;
}
.anim.swipe:after {
    content: '';
    background: #f7f5f5;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 10px;
    transform: translateX(100%);
	transition-duration: 0.6s;
	transition-property: transform;
	transition-timing-function: cubic-bezier(.03,.62,.2,1.01);
 
}

.anim.opacity {
    opacity: 0;
		transition-duration: 0.6s;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(.03,.19,.2,1.01);
	
  
}

.anim.play .opacity {
    opacity: 1;
}

.anim.left {
	    transform: translateX(100px);
}

.anim.right {
	        transform: translateX(-100px);

}

.anim.bottom {
	        transform: translateY(100px);

}


.anim {
  transition-duration: 0.3s;
}
.anim.bottom {
  transform: translateY(100px);
  transition-property: transform;
}
.anim.bottom.play {
  transform: translateY(0px);
}
.anim.bottom.opacity {
  transition-property: transform, opacity;
}
.anim.bottom.opacity.play {
  opacity: 1;
}
.anim.left {
  transform: translateX(100px);
  transition-property: transform;
}
.anim.left.play {
  transform: translateX(0px);
}
.anim.left.opacity {
  transition-property: transform, opacity;
}
.anim.left.opacity.play {
  opacity: 1;
}
.anim.right {
  transform: translateX(-100px);
  transition-property: transform;
}
.anim.right.play {
  transform: translateX(0px);
}
.anim.right.opacity {
  transition-property: transform, opacity;
}
.anim.right.opacity.play {
  opacity: 1;
}
.anim.delay--1 {
  transition-delay: 10ms;
}
.anim.delay--2 {
  transition-delay: 20ms;
}
.anim.delay--3 {
  transition-delay: 30ms;
}
.anim.delay--4 {
  transition-delay: 40ms;
}
.anim.delay--5 {
  transition-delay: 50ms;
}
.anim.delay--6 {
  transition-delay: 60ms;
}
.anim.delay--7 {
  transition-delay: 70ms;
}
.anim.delay--8 {
  transition-delay: 80ms;
}
.anim.delay--9 {
  transition-delay: 90ms;
}
.anim.delay--10 {
  transition-delay: 100ms;
}
.anim.delay--11 {
  transition-delay: 110ms;
}
.anim.delay--12 {
  transition-delay: 120ms;
}
.anim.delay--13 {
  transition-delay: 130ms;
}
.anim.delay--14 {
  transition-delay: 140ms;
}
.anim.delay--15 {
  transition-delay: 150ms;
}
.anim.swipe.play:after {
  transform: translateX(0%);
  z-index: -1;
}
.anim.swipe:after {
  content: '';
  background: #f0f0f0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 10px;
  transform: translateX(100%);
  transition: 0.6s transform cubic-bezier(0.03, 0.62, 0.2, 1.01);
}
.anim .opacity {
  transition: 0.6s opacity cubic-bezier(0.03, 0.19, 0.2, 1.01) 0.4s;
}
.anim.play .opacity {
  opacity: 1;
}