61

I have found this article:

http://www.zurb.com/article/221/css3-animation-will-rock-your-world on css3 animations.

I am trying to create a similar effect seen on the site above but on personal site at: www.imfrom.me

Where I have the state of Maine, there is the red tip box. I want to create a pulse ring by the arrow indicating the location.

UPDATED WITH CODE:

I came up with this below (try it here: http://jsfiddle.net/ftrJn/) as you can tell its close, any thoughts on how I can get it to grow from the center:

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;
    position: absolute;
    left:20px;
    top:214px;
}
.gps_ring{
    -webkit-animation-name: pulsate;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite
}
@-webkit-keyframes pulsate {
    0% { width:1px;height: 1px; opacity: 0.0}
    10% { width:3px;height: 3px; opacity: .20}
    20% { width:5px;height: 5px; opacity: .40 }
    30% { width:7px;height: 7px; opacity: .60 }
    40% { width:9px;height: 9px; opacity: .80 } 
    50% { width:11px;height: 11px; opacity: 1.0}
    60% { width:13px;height: 13px; opacity: .80}
    70% { width:15px;height: 15px;  opacity: .60}
    80% { width:17px;height: 17px;  opacity: .40}
    90% { width:19px;height: 19px;  opacity: .20}
    100% { width:21px;height: 21px;  opacity: 0.0}
 }

Thoughts on that above?

Any ideas on how I can create something like that as if rings animate out and fade away?

Charlie
  • 11,380
  • 19
  • 83
  • 138

2 Answers2

145

You have a lot of unnecessary keyframes. Don't think of keyframes as individual frames, think of them as "steps" in your animation and the computer fills in the frames between the keyframes.

Here is a solution that cleans up a lot of code and makes the animation start from the center:

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;
    position: absolute;
    left:20px;
    top:214px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

You can see it in action here: http://jsfiddle.net/Fy8vD/

methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • Looks great! Thanks for the pointers. The ease out allows it to grow from the center? –  Feb 06 '11 at 20:28
  • 1
    No, it's "-webkit-transform: scale(x, x)" what allows it to scale from the center. It's default transformation point is the center of the object, but if you wanted to change it you would place "-webkit-transform-origin: top left or 0% 0% in .gps_ring. – methodofaction Feb 06 '11 at 21:33
  • 2
    This failed to work for me in Chrome due to some sort of optimization that stopped the animation completely because it started invisible. Changing the initial scale to `0.01, 0.01` fixed the problem. – Nimphious Sep 24 '12 at 01:56
  • @Nimphious Yes, this happens to me in Chrome 21 too. I've updated the answer, thanks for the tip. – methodofaction Sep 24 '12 at 03:24
  • do you know which browsers this will **not** work in? – henrywright Apr 14 '14 at 11:23
  • Chrome 41 -- only fired one iteration until I broke up the shorthand version of "animation" into "animation-name", "animation-duration", etc. Weird. – JoshuaDavid Mar 27 '15 at 22:38
9

Or if you want a ripple pulse effect, you could use this:

http://jsfiddle.net/Fy8vD/3041/

.gps_ring {
     border: 2px solid #fff;
     -webkit-border-radius: 50%;
     height: 18px;
     width: 18px;
     position: absolute;
     left:20px;
    top:214px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0;
}
.gps_ring:before {
    content:"";
    display:block;
    border: 2px solid #fff;
    -webkit-border-radius: 50%;
    height: 30px;
    width: 30px;
    position: absolute;
    left:-8px;
    top:-8px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-delay: 0.1s;
    opacity: 0.0;
}
.gps_ring:after {
    content:"";
    display:block;
    border:2px solid #fff;
    -webkit-border-radius: 50%;
    height: 50px;
    width: 50px;
    position: absolute;
    left:-18px;
    top:-18px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-delay: 0.2s;
    opacity: 0.0;
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
mariuspearson
  • 229
  • 2
  • 1