3

I'm trying to create a pulsing dot effect with CSS.

HTML markup is simple:

<span class="map-pin pulse dark">
    <span></span>
</span>

The CSS is like this:

@-webkit-keyframes pulse{
    0%{
        opacity:1;
        width: 16px;
        height: 16px;
    }
    50% {
        opacity:.5;
        -webkit-transform: scale(3);
    }
    100%{
        opacity: 0; 
    }
}
@-moz-keyframes pulse{
    0%{
        opacity:1;
        width: 16px;
        height: 16px;
    }
    50% {
        opacity:.5;
        -moz-transform: scale(3);
    }
    100%{
        opacity: 0; 
    }
}
.pulse{
    width: 32px;
    height: 32px;
    background: none;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    line-height: 16px;
    text-align: center;
}
.pulse>*{
    position: relative;
    border:1px solid #fa565a;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    text-indent: -9000px;

    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;

    -webkit-transition-property:top, bottom, left, right, opacity, border-width;
    -webkit-animation-duration:2s;
    -webkit-animation-name:pulse;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0,0,0,1);

    -moz-transition-property:top, bottom, left, right, opacity, border-width;
    -moz-animation-duration:2s;
    -moz-animation-name:pulse;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: cubic-bezier(0,0,0,1);
}
.pulse.dark>*{
    border-color: #fa565a;
}
.pulse:after{
    content: '';
    display: block;
    position:absolute;
    width: 16px;
    height: 16px;
    left: 8px;
    top: 2px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    background: #2B6882;
    vertical-align: middle;
}
.pulse.dark:after{
    background: #fa565a;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

It display OK in firefox, but in Chrome, the circle border, that should pulse, is heavily pixelated. That border is the empty span inside pulse span.

I'm looking at it for almost an hour and can't find what could be the problem.

idjuradj
  • 1,355
  • 6
  • 19
  • 31
  • Why don't you put all your code on www.jsfiddle.net? – Caio Tarifa Jan 02 '14 at 05:01
  • 1
    [Fiddle](http://jsfiddle.net/za83j/) – Re Captcha Jan 02 '14 at 07:36
  • 2
    You're better of changing the size properties(width and height) instead of using a `scale`. Because `scale` will just stretch the image and will NOT calculate/generate new pixels, where as sizing generates new pixels. [jsFiddle](http://jsfiddle.net/za83j/8/) Not perfect, but that's the idea – nkmol Jan 02 '14 at 08:15

1 Answers1

2

Without the "text-indent: -9000px", it works slightly better.

Fiddle.

.pulse>*{
    position: relative;
    border:1px solid #fa565a;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;

    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;

    -webkit-transition-property:top, bottom, left, right, opacity, border-width;
    -webkit-animation-duration:2s;
    -webkit-animation-name:pulse;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0,0,0,1);

    -moz-transition-property:top, bottom, left, right, opacity, border-width;
    -moz-animation-duration:2s;
    -moz-animation-name:pulse;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: cubic-bezier(0,0,0,1);
}
Re Captcha
  • 3,125
  • 2
  • 22
  • 34
  • 1
    Yes, it looks a little bit better. But why the hell does it work okay in Firefox and it has problems with Chrome? Is it possible that it's inheriting some CSS bit, which is messing up the pulsing part? What should i look for regarding the inherited properties? – idjuradj Jan 02 '14 at 12:01