CSS圈子动画动画

我在CSS中画了一个圆圈.我试着用代码来解决这个问题,但是无济于事.我有两个主要问题：

>在Chrome中：
旋转时振动圈
>在Firefox中：
当圆圈在圆形运动中动画时,会出现一个尾巴点.

这是我使用的CSS样式：

.followers_arc_outer{
    position:absolute;
    width:300px;
    height:300px;
    border-radius:100%;
    border:2px solid;
}
.followers_arc_start {
    border-color:transparent #ecd201 #ecd201 #ecd201;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.followers_arc_inner{
    position:absolute;
    top:18px;
    left: 18px;
    width: 280px;
    height:280px;
    border-radius:100%;
    border:2px solid;
    border-color:transparent #ecd201 #ecd201 #ecd201;
}
.o_circle {
    -webkit-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}@keyframes rotation{
    from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
.i_circle {
    -webkit-animation: rotation2 2s infinite linear;
   animation: rotation2 2s infinite linear;
}
@-webkit-keyframes rotation2 {
    from {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
    to   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}@keyframes rotation2 {
    from {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
    to   {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}

<div class="followers_arc_outer followers_arc_start o_circle"></div>
    				<div class="followers_arc_inner followers_arc_start i_circle"></div>

我创造了一个小提琴.链接在这里：
http://jsfiddle.net/r8cqet2c/4/

我做错了吗？

解决方法

如果你的圈子很大,那么浏览器可能需要时间来渲染它们.同时,当您尝试旋转和动画时,浏览器将很难使用cpu图形(默认情况下浏览器使用).

但是您可以通过使用某些硬件加速的CSS在浏览器中使用GPU.这将提高你的动画的表现.以下是您可以将其应用于圈子的代码,使其运行平稳.

-webkit-transform: translate3d(0,0);
  -moz-transform: translate3d(0,0);
  -ms-transform: translate3d(0,0);
  -o-transform: translate3d(0,0);
   transform: translate3d(0,0);

或者你可以使用下面的一个…两个都会工作..

-webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);

如果您仍然看到一些奇怪的滞后或某些在chrome或safari,那么您将不得不添加以下代码.

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

希望有帮助..

CSS圈子动画动画

解决方法

相关文章