CSS3不透明度转换的Webkit问题？

Posted 2023-03-06

【中文标题】CSS3不透明度转换的Webkit问题？

【英文标题】：Webkit issue with css3 opacity transition?

【发布时间】：2013-10-30 05:36:08

【问题描述】：

我遇到了这个修改 Bootstrap 3 轮播以实现fade 而不是“幻灯片”的示例。然而，在 webkit 中，示例中的过渡并不平滑 - 它有点像项目之间的闪烁。

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

更奇怪的是，当我在标记中使用此代码时，项目过渡平稳，但页面上的其他元素在每次过渡开始时都会抖动一个像素左右。

是否存在某种与不透明过渡不兼容的 Webkit？

【参考方案1】：

解决此问题的方法可能不止一种，但对this question 的回答建议将以下内容添加到正在应用过渡的项目中：

-webkit-transform: translateZ(0);

这使 codepen 示例在 Webkit 中顺利运行，并且还解决了我在代码中遇到的问题。

【参考方案2】：

改变你身体的背景，轻松过渡

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;