# CSS3 Transitions

Select Transition Type

# Setup

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

### Full Width

### Custom

### One Slide

### JSON

### JSON Custom

### Lazy Load

### Auto Height