使用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筆記4上注意，注3在擴展時只會出現小故障。請幫忙

樣本網址：https://mp3chest.com/mp3/Cuebrick-feat-KARRA---Smoke--Fire-OUT-NOW（只需點擊分享按鈕，這就是動畫部分）。

Answer 1

你的電腦和手機的唯一區別就是硬件配置。這可能是您的手機配置無法順利呈現。在另一部手機上試用，或者升級一部。