blocks|key|1070310|text|您的代码似乎是正确的。我认为这与您使用的.png和浏览器在旋转时重绘对象的方式低效有关，从而导致挂起(您在哪种浏览器下测试？)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1070311|如果可能，用本机代码替换.png。|1070312|请参阅；http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/|offset|length|1070313|使用这种方法，Chrome不会让我停顿。|1070314|entityMap|0|LINK|mutability|MUTABLE|url|http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/^0|0|0|4|25|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

Your code seems correct. I would presume it is something to do with the fact you are using a .png and the way the browser redraws the object upon rotation is inefficient, causing the hang (what browser are you testing under?)

If possible replace the .png with something native.

see; <a href="http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/" rel="nofollow noreferrer">http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/</a>

Chrome gives me no pauses using this method.

blocks|key|1284948|text|这里的问题是，当您需要一个-webkit-ANIMATION-timing-function时，您已经提供了一个-webkit-TRANSITION-timing-function。您的0到360值将正常工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1284949|entityMap^0|D|X|1K|Y|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Your issue here is that you've supplied a <code>-webkit-TRANSITION-timing-function</code> when you want a <code>-webkit-ANIMATION-timing-function</code>. Your values of 0 to 360 will work properly.

blocks|key|1070415|text|如果你只是在寻找webkit版本，这是来自http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit的漂亮的：http://s3.amazonaws.com/37assets/svn/463-single_spinner.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1070416|entityMap|0|LINK|mutability|MUTABLE|url|http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit|1|http://s3.amazonaws.com/37assets/svn/463-single_spinner.html^0|L|2A|0|30|1O|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

If you're only looking for a webkit version this is nifty: <a href="http://s3.amazonaws.com/37assets/svn/463-single_spinner.html" rel="noreferrer">http://s3.amazonaws.com/37assets/svn/463-single_spinner.html</a> from <a href="http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit" rel="noreferrer">http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit</a>

blocks|key|1285076|text|您可能还会注意到一点延迟，因为0deg和360+0deg是同一个点，所以它是从圆圈中的点1返回到点1。这实际上并不重要，但要修复它，您需要做的就是将360+0deg更改为359deg|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1285077|my+jsfiddle+illustrates+your+animation:|offset|length|1285078|#myImg+{
++++-webkit-animation:+rotation+2s+infinite+linear;
}

@-webkit-keyframes+rotation+{
++++from+{-webkit-transform:+rotate(0deg);}
++++to+++{-webkit-transform:+rotate(359deg);}
}|code-block|syntax|javascript|1285079|此外，可能更类似于苹果装载图标的是一个动画，它转换灰色条纹的不透明度/颜色，而不是旋转图标。|1285080|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kFmY8/2/^0|0|0|13|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

You also might notice a little lag because 0deg and 360deg are the same spot, so it is going from spot 1 in a circle back to spot 1. It is really insignificant, but to fix it, all you have to do is change 360deg to 359deg

<a href="http://jsfiddle.net/kFmY8/2/" rel="noreferrer">my jsfiddle illustrates your animation:</a> 

<pre><code>#myImg {
 -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(359deg);}
}
</code></pre>

Also what might be more resemblant of the apple loading icon would be an animation that transitions the opacity/color of the stripes of gray instead of rotating the icon.

blocks|key|1285096|text|我做了一个small+library，它可以让你在没有图像的情况下很容易地使用脉搏。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1285097|它使用CSS3，但如果浏览器不支持它，它会退回到JavaScript。|1285098|//+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();|code-block|syntax|javascript|1285099|Example。|1285100|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/alexanderdickson/throbbage|1|https://rawgithub.com/alexanderdickson/throbbage/master/example/index.html^0|5|D|0|0|0|0|0|7|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

I made a <a href="https://github.com/alexanderdickson/throbbage" rel="nofollow">small library</a> that lets you easily use a throbber without images.

It uses CSS3 but falls back onto JavaScript if the browser doesn't support it.

<pre><code>// 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();
</code></pre>

<a href="https://rawgithub.com/alexanderdickson/throbbage/master/example/index.html" rel="nofollow">Example</a>.

blocks|key|1070509|text|您可以像这样使用动画：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1070510|-webkit-animation:+spin+1s+infinite+linear;

@-webkit-keyframes+spin+{
++++0%25+++{-webkit-transform:+rotate(0deg)}
++++100%25+{-webkit-transform:+rotate(360deg)}
}|code-block|syntax|javascript|1070511|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You could use animation like this:

<pre><code>-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
 0% {-webkit-transform: rotate(0deg)}
 100% {-webkit-transform: rotate(360deg)}
}
</code></pre>

I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has finished before it does the next rotation.

<pre><code>@-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;
 }
</code></pre>

I have tried changing the animation duration but it makes no difference, if you slow it right down say 5s its just more apparent that after the first rotation there is a pause before it rotates again. It's this pause I want to get rid of.

Any help is much appreciated, thanks.

CSS3 Continuous Rotate Animation (Just like a loading sundial)

我正在尝试通过使用PNG和CSS3动画复制一个苹果风格的活动指示器(日规加载图标)。我让图像不断地旋转，但在动画完成后，在它进行下一次旋转之前，似乎有一个延迟。@-webkit-keyframes rotate {  from {    -webkit-transform: rotate(0deg);  }  to {...

问CSS3连续旋转动画(就像加载日规一样)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3连续旋转动画(就像加载日规一样)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3连续旋转动画(就像加载日规一样)
EN