Css animation ne fonctionne pas en douceur

Question

J'ai essayé de chercher partout et qui a fini par translate3D contribue à lisser l'animation mais il ne fonctionne pas .. Voici le code:

.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 
} 

Le Html avec 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> 

Cela fonctionne bien sur mon PC mais pas sur mon mobile note 4 de Redmi et la note 3 juste pépins tout en expansion. S'il vous plaît aider

Exemple Url: https://mp3chest.com/mp3/Cuebrick-feat-KARRA---Smoke--Fire-OUT-NOW (Cliquez simplement sur le bouton de partage et c'est la partie d'animation).

Answer 1

La seule différence entre votre PC et votre mobile est la configuration matérielle. Il se peut que la configuration de votre mobile ne soit pas capable de le rendre correctement. Essayez-le sur un autre mobile, ou peut-être un autre.