CODEWITHSUNDEEP
csscss-animations
brandongray
brandongray

Reputation: 798

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).

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!

Demo: http://codepen.io/fractionwhole/pen/HljuG

Upvotes: 0

Views: 8012

Answers (2)

vals
vals

Reputation: 64164

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>

And the 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.

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 !

webkit demo

A better solution:

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.

Upvotes: 4

Madeyedexter
Madeyedexter

Reputation: 1193

in addition to scaling you would have to dynamically add smaller rings and attach the css animations to them after a certain period. The larger rings should be removed accordingly. You will have to use jquery for that. The smaller rings should be id'd properly.

Suppose at t=0 you have 7 rings id'd r1-r7(outwards). When the seventh ring scales out of sight, add another ring inside(with an id of r7) and add animation to it. Repeat this infinitely.

Upvotes: 0

Related Questions