CSS3 加载圈答案

【问题标题】：CSS3 Loading CircleCSS3 加载圈
【发布时间】：2012-12-22 00:53:39
【问题描述】：

我有一个有 3 个圆圈的 CSS3 圆圈加载器。我遇到了问题每个圆圈（从第一个圆圈开始）应该在几秒钟后淡出，可能使用 CSS 动画。任何帮助表示赞赏。

【问题讨论】：

如果在这个任务中没有任何重要的理由使用 css。我建议使用在chimply.com 生成的加载图像。
你为什么不为此使用动画 gif？
@BillyMoat ，Gif 更容易，但在 CSS3 中可以实现并且加载速度更快。
如果它代表下载速度等真实世界的价值，我完全赞成使用 css 而不是图像。但是，这个 gif 最多只有几千字节，所以我不确定为它制作一个 css 解决方案的努力（这将是 css3，因此在旧浏览器中不起作用）很有用。使用 gif 卢克（詹姆斯）。
我已经制作了一个bit fancier 版本的加载器圈子。

【解决方案1】：

我会走一条稍微不同的路线。仅适用于 webkit，但您可以根据需要进行更改：http://jsfiddle.net/8kQ2u/17/

@-webkit-keyframes fades {
    0%, 100% { 
       opacity: 1;
    }
    50% {
       opacity: 0;
    }
}

.circle span  {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 9.975em auto;
  background: #dbdbdb;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-name: fades;
  -webkit-animation-iteration-count: infinite;
}

.circle span:nth-child(2) {
    -webkit-animation-delay: 0.2s;
}

.circle span:nth-child(3) {
    -webkit-animation-delay: 0.4s;
}

:nth-child 这里很好，因为我很确定它在支持@keyframes 的浏览器中完全支持。如果您愿意，可以使用兄弟选择器 (+)。

【讨论】：

-o-border-radius?你用的是多么丑陋的前缀！我认为仅非前缀属性对于 SO 答案是完全可以的。
是的，我同意。除了animation 之类的东西，它们不不支持没有前缀 [yet]。
您的解决方案很好，只是动画不够清晰，无法引起注意。
@PavloMykhalov 您可能应该在评论语法之前查看 OP 帖子。我只添加了动画声明。
@sємsєм 很高兴它为您工作。以为您只是想淡出图标，这就是我选择的原因，尽管更改很容易！ :)

【解决方案2】：

使用关键帧即可：http://jsfiddle.net/Nux3z/

几个细节：

1) Use of :nth-child, or :first-child, etc to target your elements
2) Timing of animations: I'm using 1.7, 2.7, rather than 0.7s, 1.4s because I'm allowing for the 1s of fade to finish NOT simply doubling/tripling the time each element takes to animate.
3) Not a solution for IE

【讨论】：

【解决方案3】：

正如其他人所说，使用动画和时间在这里是必不可少的。
事实上，每个圆圈都使用了相同的动画，
但您必须对每个圈子应用不同的延迟。

见下文（我也在使用nth-child 而不是first-child）：

.circle span {
    /** The same animation to each circle **/
    -webkit-animation: circleFade 3s linear infinite;
}

/** Different animation delays **/
.circle span:nth-child(1) { -webkit-animation-delay: 1s; }
.circle span:nth-child(2) { -webkit-animation-delay: 2s; }
.circle span:nth-child(3) { -webkit-animation-delay: 3s; }

/** Animation **/
@-webkit-keyframes circleFade {
     0% { background: #ddd; }
    25% { background: #999; }
    35% { background: #999; }
    60% { background: #ddd; }
}

[See the fiddle]
[Now see the fancy fiddle]

【讨论】：