Breaking News: Grepper is joining You.com. Read the official announcement!

how to use animateout in owl carousel

Khayrul answered on October 17, 2023 Popularity 4/10 Helpfulness 1/10

answer how to use animateout in owl carousel

how to use animateout in owl carousel

Comment

/* Feel free to change duration  */ 
.animated  {
  -webkit-animation-duration : 1000 ms  ;
  animation-duration : 1000 ms  ;
  -webkit-animation-fill-mode : both  ;
  animation-fill-mode : both  ;
}  
/* .owl-animated-out - only for current item */ 
/* This is very important class. Use z-index if you want move Out item above In item */ 
.owl-animated-out {
  z-index : 1 
   }
/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */ 
.owl-animated-in {
  z-index : 0 
   }
/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css:  */ 
.fadeOut  {
  -webkit-animation-name : fadeOut  ;
  animation-name : fadeOut  ;
}  
@-webkit-keyframes  zoomIn  {
  0% {
    opacity : 0   ;
    transfrom: scale(0.7);
  }  
  100% {
    opacity : 1   ;
    transfrom: scale(1);
  }  
}
@keyframes  zoomOut  {
  0% {
    opacity : 1   ;
    transfrom: scale(1);
  }  
  100% {
    opacity : 0   ;
    transfrom: scale(0.7);
  }  
}

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: owlcarousel2.github.io

Tags: javascript owl-carousel

Link to this answer
Share Copy Link

Contributed on Oct 17 2023

Khayrul

0 Answers Avg Quality 2/10

how to use animateout in owl carousel

Contents

More Related Answers

how to use animateout in owl carousel

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.