How to create a pulse effect using -webkit-animation - outward rings

Question

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

User · Accepted Answer

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

User · Answer

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

[animation] How to create a pulse effect using -webkit-animation - outward rings

Examples related to animation

Examples related to css

Examples related to webkit