CODEWITHSUNDEEP
csstwitter-bootstrapcss-transitionsopacity
rda3000
rda3000

Reputation: 1420

Webkit issue with css3 opacity transition?

I came across this example of modifying the Bootstrap 3 carousel to achieve a fade instead of a 'slide'. In webkit, however, the transition in the example is not smooth - it sort of flashes between items.

http://codepen.io/Rowno/pen/Afykb

Weirder still, when I use this code in my markup, the item transitions smoothly but other elements on the page sort of jiggle by a pixel or so at the start of each transition.

Is there some sort of Webkit incompatibility with opacity transitions?

Upvotes: 1

Views: 3304

Answers (2)

rda3000
rda3000

Reputation: 1420

There may be more than one way to address this, but an answer to this question suggests adding the following to the item upon which the transition is being applied:

-webkit-transform: translateZ(0);

This gets the codepen example working smoothly in Webkit, and also fixes the problem I was having in my code.

Upvotes: 4

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

change the background of your body and and ease to your transition 

body{
 bacground:black; 
}
.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      -webkit-transition: opacity 300ms ease-in-out;
      -moz-transition: opacity 300ms ease-in-out;
       transition: opacity 300ms ease-in-out;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}



html, 
body, 
.carousel, 
.carousel-inner, 
.carousel-inner .item {
  height: 100%;
}

.item:nth-child(1) {
  background: darkred;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: orange;
}

Upvotes: 1

Related Questions