CODEWITHSUNDEEP
cssanimationborder
Oinobareion
Oinobareion

Reputation: 15

CSS Animation: changing the border-width of an element

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!

Upvotes: 0

Views: 1922

Answers (2)

Oinobareion
Oinobareion

Reputation: 15

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>

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

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

Upvotes: 4

Related Questions