CSS3 动画环答案

【问题标题】：CSS3 Animated RingsCSS3 动画环
【发布时间】：2013-07-21 15:03:22
【问题描述】：

在尝试实现某个动画时寻求一些帮助。我正在尝试创建一个类似于infinite expanding rings seen here 的序列。（示例环正在收缩，我正在寻找另一个方向）。

到目前为止，我有一个很好的开始，我只是不确定如何让它“顺利”循环，或者是否可以仅使用 CSS。

非常感谢任何提示或想法。谢谢！

演示：http://codepen.io/fractionwhole/pen/HljuG

【问题讨论】：

要平滑循环，您需要做的就是确保动画的最后一个关键帧恰好在动画的第一个关键帧之前匹配。这将很困难，因为环的宽度相同，因此它们以相同的速率缩放。您可以尝试在到达中心时逐渐减小环的宽度。您还需要确保在动画期间以某种方式在中心创建了一个环，以替换从中心开始的环。

标签： css css-animations

【解决方案1】：

首先，让我们创建 6 个环

<div id="r1" class="ring"></div>
<div id="r2" class="ring"></div>
<div id="r3" class="ring"></div>
<div id="r4" class="ring"></div>
<div id="r5" class="ring"></div>
<div id="r6" class="ring"></div>

还有 CSS：

.ring {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    background-color: transparent;
    border: 15px gray solid;
    -webkit-animation-name: ani; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 6s;
    -webkit-animation-direction: reverse;
}

@-webkit-keyframes ani {
    0% {-webkit-transform: scale(1); opacity: 0;}
    10% {-webkit-transform: scale(1); opacity: 1;}
    99.9% {-webkit-transform: scale(0.1); opacity: 1} 
    100% {-webkit-transform: scale(0.1); opacity: 0} 
}

#r2 { -webkit-animation-delay: 1s;}
#r3 { -webkit-animation-delay: 2s;}
#r4 { -webkit-animation-delay: 3s;}
#r5 { -webkit-animation-delay: 4s;}
#r6 { -webkit-animation-delay: 5s;}

这个想法是让环出现在最小比例，从最小比例到最大比例，然后让它消失。

要为 n 个环制作该效果，您无需创建不同的动画，只需在初始延迟后重复使用相同的动画即可。

我误读了您的问题，没有看到您想要视频的反面。我后来修复了它，将动画设置为反向；对不起！

webkit demo

更好的解决方案：

CSS

.ring {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    background-color: transparent;
    border: 15px gray solid;
    -webkit-animation-name: ani; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 6s;
    -webkit-animation-direction: normal;

}

@-webkit-keyframes ani {
    0% {-webkit-transform: scale(0.01); opacity: 0} 
    1% {-webkit-transform: scale(0.01); opacity: 1} 
    95% {-webkit-transform: scale(1); opacity: 1;}
    100% {-webkit-transform: scale(1); opacity: 0;}
}

#r2 { -webkit-animation-delay: -1s;}
#r3 { -webkit-animation-delay: -2s;}
#r4 { -webkit-animation-delay: -3s;}
#r5 { -webkit-animation-delay: -4s;}
#r6 { -webkit-animation-delay: -5s;}

new demo

我已经更改了关键帧，现在它可以正常运行了。更重要的是，将延迟设置为负值，您可以将环分开，但动画会立即开始。

【讨论】：

这绝对与我想要完成的目标非常接近。我希望戒指的尺寸已经设定好（就像我的起点代码笔一样）。这样在页面加载时，在等待环填满屏幕时不会出现尴尬的时间间隔。但是，这确实符合我的要求，因此我将其标记为正确答案。我会继续调整它，希望能把它准确地放在我需要的地方。如果您也有其他想法，也很高兴听到其他想法。谢谢！

【解决方案2】：

除了缩放之外，您还必须动态添加更小的环并在一段时间后将 css 动画附加到它们。较大的环应相应地移除。您将不得不为此使用 jquery。较小的环应正确标识。

假设在 t=0，您有 7 个环 id'd r1-r7（向外）。当第七个环缩小到视线之外时，在里面添加另一个环（id 为 r7）并为其添加动画。无限重复。

【讨论】：

抱歉，我没有说明我正在寻找纯 CSS 解决方案。我知道如何使用 JS 来做到这一点，但我试图在这里推动一些 CSS 限制，看看能/不能实现什么。感谢您的反馈！