首页 文章

CSS3连续旋转动画（就像装载日）

提问于
浏览 次
117

我试图通过使用PNG和CSS3动画复制Apple风格活动指示器（日本加载图标） . 我让图像旋转并连续进行，但在动画完成下一次旋转之前似乎有一段延迟 .

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

我已经尝试过改变动画的持续时间，但没有区别，如果你慢下来说5s就更明显了，在第一次旋转之后有一个停顿再次旋转 . 这是我想要摆脱的暂停 .

非常感谢任何帮助，谢谢 .

css animation webkit css3 transform

6 回答

  • 8

    您的问题是，当您需要 -webkit-ANIMATION-timing-function 时，您已经提供了 -webkit-TRANSITION-timing-function . 您的0到360值将正常工作 .

    回复于
  • 1
    回复于
  • 50

    你的代码似乎是对的 . 我认为这与您使用.png的事实有关，浏览器在重新旋转时重绘对象的方式效率低下，导致挂起（您在哪个浏览器下测试？）

    如果可能的话，用原生的东西替换.png .

    看到; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

    Chrome使用此方法无法暂停 .

    回复于
  • 1

    你也可能会注意到一点延迟，因为0deg和360deg是相同的点，所以它从一个圆圈中的点1回到现在1.它真的是微不足道的，但要解决它，你所要做的就是将360deg改为359deg

    my jsfiddle illustrates your animation:

    #myImg {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

    另外，苹果加载图标可能更具有类似性的是动画，它可以转换灰色条纹的不透明度/颜色，而不是旋转图标 .

    回复于
  • 71

    你可以使用这样的动画：

    -webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}
    回复于
  • 27

    我做了small library，让你轻松使用没有图像的悸动者 .

    它使用CSS3但如果浏览器不支持它则会回退到JavaScript .

    // First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);

// Start the throbber.
throbber.play();

// Pause the throbber.
throbber.pause();

    Example .

    回复于

相关问题