Question

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

到目前为止，我已经有了一个非常好的开始，我只是不确定如何让它“顺利”循环，或者只有CSS才能实现。

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

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

Answer 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

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

Answer 2

除了缩放之外，您还必须动态添加较小的铃声并在一段时间后将css动画附加到它们。应相应地移除较大的环。你必须使用jquery。较小的戒指应该正确识别。

假设在t = 0时你有7个环id'd r1-r7（向外）。当第七个环缩放到视线外时，在内部添加另一个环（id为r7）并为其添加动画。无限地重复这个。

CSS3动画戒指

2 个答案:

webkit demo

new demo