# CSS3 Transitions

Select Transition Type

# Setup

From update 1.3.2 all transitions styles are moved out from main owl.carousel.css file to owl.transitions.css

Important! CSS3 transition works only in modern browsers that support CSS3 translate3d methods and only with single item on screen.
Use `transitionStyle` option to set transtion. There are four predefined transitions: `"fade"`, `"backSlide"`, `goDown` and `scaleUp`.
You can also build your own transition styles easily. For example by adding "YourName" value `transitionStyle: "YourName"`, owlCarousel will add `.owl-YourName-out` class to previous slide and `.owl-YourName-in` to next slide. All transitions require "in" and "out" styles. Look into owl.carousel.css source for details.

    $(document).ready(function() {

      var owl = $("#owl-demo");

      owl.owlCarousel({
        navigation : true,
        singleItem : true,
        transitionStyle : "fade"
      });

    });

    <div id="owl-demo" class="owl-carousel owl-theme">

      <div class="item"><img src="assets/fullimage4.jpg"></div>
      <div class="item"><img src="assets/fullimage5.jpg"></div>
      <div class="item"><img src="assets/fullimage6.jpg"></div>
      <div class="item"><img src="assets/fullimage7.jpg"></div>
      <div class="item"><img src="assets/fullimage1.jpg"></div>
      <div class="item"><img src="assets/fullimage2.jpg"></div>
      <div class="item"><img src="assets/fullimage3.jpg"></div>

    </div>

    #owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
    }

# More Demos

### Images

### Custom

### Custom 2

### One Slide

### JSON

### JSON Custom

### Lazy Load

### Auto Height