0

I am trying to animate the border-width of a circle to give it a pulsating effect. So let's say we define this circle like this:

.bubble {
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    background: #facf35;
    border: solid 14px #fff0cf;
    -moz-animation: interaction_bubble 2s infinite;
    -webkit-animation: interaction_bubble 2s infinite;
    -o-animation: interaction_bubble 2s infinite;
}

And then I define the animation, which changes the "thickness" of the border (e.g. for Firefox)

@-moz-keyframes interaction_bubble { 
    0%{border: solid 14px #dfe4c7;}
    50%{border: solid 24px #dfe4c7;}
    100%{border: solid 14px #dfe4c7;}
}

The problem here is, that the whole object itself moves down and to the right due to the change of the size. How can i prevent it from doing that? I want that the object stays at the same place and just the border resizes. Can you help me with that?

Here's a jsFiddle showing the problem: http://jsfiddle.net/Oinobareion/rRTgk/

Thanks in advance!

2 Answers 2

4

Instead of changing the border size, just try to apply a scale transformation, e.g.

@-moz-keyframes interaction_bubble { 
    0%{ -moz-transform: scale(1); }
    50%{ -moz-transform: scale(1.4); }
    100%{ -moz-transform: scale(1); }
}

example jsbin (for firefox only): http://jsbin.com/ejejet/3/edit


If you want to mantain instead your original animation try to also add

-moz-box-sizing: border-box;

to the style of your element: this make possible to change the border width without affecting the size and the position of the element itself.

Example jsbin (for firefox only): http://jsbin.com/ejejet/4/edit

As a side note your animation could be simplified like this:

@-moz-keyframes interaction_bubble { 
    0% {border-width: 14px }
    50% {border-width: 24px }
    100% {border-width: 14px }
}

since you're changing only the border-width property

4
  • Yes, I thought about this and it actually works. But it's not the effect I'd like to have :-) Thx anyway. Apr 30, 2013 at 14:15
  • This also works, but it resizes the "inner part" of the circle. And this looks kind of weird, when there's text inside of the circle. Apr 30, 2013 at 14:26
  • if you change the border either you resize the element outside (but you don't want this) or you resize inside. Or you scale the element. I don't see another solution Apr 30, 2013 at 14:30
  • yep, that's true. I am trying it now with 2 elements, one in the foreground, on in the back. I'll share my results. Thanks for help. Apr 30, 2013 at 14:33
0

I did it now with 3 separate elemets, like this. It's a little bit more complicated, but at least it works :-) 2 Elements with the same position lie behind the first circle and are resized.

http://jsfiddle.net/Oinobareion/rRTgk/6/

<div class="bubble position_bubble"></div>
<div class="bubble_animated position_bubble_animated"></div>
<div class="bubble_animated2 position_bubble_animated2"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.