CSS Animation: changing the border-width of an element - css

Question

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!

Answer 1

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

Answer 2

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>