CSS动画无法顺利运行

Question

我试图到处搜索，最终翻译3D有助于平滑动画，但仍然不起作用..这是代码：

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

带有 php 的 html：

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

它在我的电脑上运行顺利，但在我的手机红米手机 Note 4 和注 3 上却不行，它只是在扩展时出现故障。 请帮忙

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

Answer 1

您的PC和移动设备之间的唯一区别是硬件配置。可能是您的手机配置无法流畅地呈现它。在另一部手机上尝试一下，或者可能是升级的手机。