分享
三行代码  ›  专栏  ›  技术社区  ›  Alan

不透明度的CSS动画不适用于safari,而适用于google chrome

  •  0
  • Alan  · 技术社区  · 6 天前
    @keyframes fadeInUp {
     from {
       opacity: 0%;
       -webkit-transform: translate3d(0, 100%, 0);
       transform: translate3d(0, 100%, 0);
     }
    
     to {
       opacity: 100%;
       -webkit-transform: none;
       transform: none;
     }
    }
    
    .fadeIn {
     margin-top: 2rem;
     opacity: 0;
     animation: fadeInUp 1s ease-in-out 0s forwards;
     -webkit-animation-name: fadeInUp 1s ease-in-out 0s forwards;
     animation-delay: .7s;
     -webkit-animation-delay: .7s;
    
     &.second {
       animation-delay: 3s;
       -webkit-animation-delay: 3s;
     }
    }
    
    <div class="col-md-10 px-3 fadeIn">
      <h1>
         Welcome to my personal website......etcetcetc
      </h1>
    </div>
    
    

    如果有什么改变的话,我会把这个和Bootstrap一起使用。

    1 回复  |  直到 6 天前
        1
  •  0
  •   Kaiido    6 天前

    游猎 doesn't support opacity 规则。
    必须使用介于 0 1 对于此浏览器:

    @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translate3d(0, 100%, 0);
     }
     to {
       opacity: 1;
       transform: none;
     }
    }
    
    .fadeIn {
     margin-top: 2rem;
     opacity: 0;
     animation: fadeInUp 1s ease-in-out .7s forwards;
    }
    <div class="col-md-10 px-3 fadeIn">
      <h1>
         Welcome to my personal website......etcetcetc
      </h1>
    </div>

    也不相关但你 -webkit-animation-name 值无效,并且浏览器不需要前缀,因为您使用的规则需要几年的时间。