CSS3动画环 [英] CSS3 Animated Rings

问题描述

寻找一些关于尝试实现某个动画的帮助。我正在尝试创建一个类似于这里看到的无限扩展环的序列。 （示例戒指正在收缩，我正在寻找另一个方向）。

Looking for some help on trying to achieve a certain animation. I'm trying to create a sequence similar to the infinite expanding rings seen here. (The example rings are contracting, I'm looking to go the other direction).

我有一个很好的开始，到目前为止，我只是不确定如何使它循环顺利，或者如果它甚至可能只有CSS。

I've got a pretty good start thus far, I'm just not sure how to go about making it loop "smoothly", or if it's even possible with only CSS.

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

Any tips or ideas are greatly appreciated. Thanks!

演示： http：// codepen。 io / fractionwhole / pen / HljuG

推荐答案

首先，我们创建6个戒指

First, let's create 6 rings

<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;}

这个想法是让戒指出现在最小刻度，从最小刻度到最大刻度，然后消失。

The idea is to make the ring appear at minscale, go from min scale to max scale, and then make it disappear.

为了使n环，你不需要创建不同的动画，只是重新使用相同的初始延迟。

To make that for n rings, you don't need to create different animations, just reuse the same with an initial delay.

我误解了你的问题，没有看到你想要的视频的对面。我固定它后来设置动画反向;对不起！

I misread your question and didn't see that you wanted the oposite of the video. I fixed it later setting the animaion in reverse; sorry !

更好的解决方案：

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

I have changed the keyframes so that now it can run in normal. More important, setting the delays to negative, you can keep the rings separate, but the animation starts right away.

这篇关于CSS3动画环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！