html - Css 动画不能正常工作

Question

我试着到处搜索，最后发现 translate3D 有助于平滑动画，但它仍然无法正常工作。这是代码:

.circle {
    z-index: 15;
    position: relative;
    width: 48px;
    height: 48px;
    margin: 4px;
    background-color: #8bc34a;
    display: block;
    border-radius: 24px;
    bottom: 0;
    top: 37%;
    float: right;
    right: 3%;
    font-size: 0;
    box-sizing: border-box;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    -webkit-transform: translate3d(-14px, 28px, 0);
    transform: translate3d(-14px, 28px, 0);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.circle .main {
    visibility: visible;
    left: 0;
    top: 0;
    margin: 12px;
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    position: relative;
    font-size: 20px;
    line-height: 24px;
    color: #FFF;
    -webkit-transition: all .2s ease-in-out .3s;
    transition: all .2s ease-in-out .3s
}
.circle.active {
    padding-top: 200px;
    width: 100%;
    top: 0;
    height: 100%;
    z-index: 15;
    margin: -1px;
    right: 2px;
    border-radius: 15px 15px 0 0;
    box-shadow: none;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}
.circle .close {
    border-radius: 40px;
    visibility: hidden;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 40px;
    left: 4px;
    right: 0;
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}
.circle.active .main {
    visibility: hidden;
    left: 4px;
    opacity: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

Html 和 Php:

 <div class="container1">
    <div class="circle <?php echo $shyt?>">
        <div class="close">
         <i class="icon-cancel xcv" aria-hidden="true"></i>
       </div>
        <div class="main1">
       <div class="main <?php echo $ytmain?>">
          <i class="icon-share" aria-hidden="true"></i>
       </div>


      <div class="social">
        <div class="btn facebookbtn">
         <a class="linkso" href="https://www.facebook.com/sharer/sharer.php?u=https://mp3chest.com/mp3/<?php echo $scrren?>&description=Hey There, Download 
 <?php echo $op90?> Mp3 For Free in the Best Quality easily Here. Just Click On Download Mp3 And Direct Download Will Start&picture=<?php echo $art300?>" target="_blank"> <i class="icon-facebook" aria-hidden="true"></i></a>
        </div>
        <div class="btn twitterbtn">
          <a class="linkso" href="https://twitter.com/share?url=https://mp3chest.com/mp3/<?php echo $scrren?>&text=Hey There, Download 
 <?php echo $op90?> Mp3 For Free Here" target="_blank">  <i class="icon-twitter" aria-hidden="true"></i></a>
        </div>
        <div class="btn googlebtn">
          <a class="linkso" href="https://plus.google.com/share?url=https://mp3chest.com/mp3/<?php echo $scrren?>" target="_blank">  <i class="icon-gplus" aria-hidden="true"></i></a>
        </div>
      </div></div>
    </div>
  </div>

它在我的电脑上运行流畅，但在我的移动 redmi note 4 和 note 3 上运行不流畅，它只是在扩展时出现故障。请帮忙

示例网址:https://mp3chest.com/mp3/Cuebrick-feat-KARRA---Smoke--Fire-OUT-NOW (只需单击“共享”按钮，这就是动画部分)。

Answer 1

您的电脑和手机之间的唯一区别是硬件配置。可能是您的手机配置无法顺利呈现。在另一部手机或升级版手机上尝试。