Chrome CSS3 动画故障

Posted 2023-03-06

【中文标题】Chrome CSS3 动画故障

【英文标题】：Chrome CSS3 animation glitch

【发布时间】：2014-11-24 23:53:40

【问题描述】：

我使用的是 Chrome 版本 37.0.2062.120 m

我在 owl carousel 2 中创建了一个轮播，并为过渡添加了许多不同的 CSS3 动画。问题是 Chrome 在任何转换过程中总是在屏幕上保留轮播左上角的一部分。

它不是保留在屏幕上的元素，而是穿过旋转木马的不同大小的故障。

我在这里举了一个例子：

javascript

    this.$el.owlCarousel(
      nav:true,
      autoplay:true,
      items:1,
      margin:5,
      loop:true,
      center:true,
      onTranslated: _.bind(this.translated,this),
      animateIn: 'fadeInDown',   // <-- css3 transition class
      animateOut: 'fadeOutDown',   // <-- css3 transition class
    );

    // gets the id of the slide and updates the data
    translated: function ()
    var currentSlideId = this.$el.find(".owl-item.active > .item").attr('id');
    slideModule.loadSlide(currentSlideId);
  

css

    @-webkit-keyframes fadeInUp 
      0% 
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
      

      100% 
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      
    

    @keyframes fadeInUp 
      0% 
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
      

      100% 
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      
    

    .fadeInUp 
      -webkit-animation-name: fadeInUp;
              animation-name: fadeInUp;
    

@-webkit-keyframes fadeOutUp 
  0% 
    opacity: 1;
  

  100% 
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  


@keyframes fadeOutUp 
  0% 
    opacity: 1;
  

  100% 
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  


.fadeOutUp 
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;

【问题讨论】：

也许您可以在 js fiddle 中展示一个示例或插入到您的帖子中 - 否则这些信息毫无用处。

它是 Chrome 特有的，我相信我的代码是正确的，我希望有人之前遇到过这个故障并且知道修复 - 希望有一个带有 webkit 供应商前缀的 css3 神奇线。跨度>

希望有人注意到同样的问题是一个很长的问题 - 如果您可以提供示例代码和一个实时示例（通过上述 js fiddle），那么任何有或没有问题的人都可以帮助您.

我看到了同样的事情。我正在使用 jQuery 更新 CSS 比例和位置，Chrome 37.0.2062.124 m 将我的 Bootstrap 面板的边缘留在周围。

我现在看到我是一个次要版本：googlechromereleases.blogspot.com/2014/10/… 在 38.0.2125.101 m 中，我看到的伪影较少，尽管仍有一些垂直线。

【参考方案1】：

你可以试试：

owl-carousel .owl-item  -webkit-transform: translateZ(0) !important;   

希望对你有帮助:)