CSS動畫：更改元素的邊框寬度

我正在嘗試爲圓的邊框寬度設置動畫效果，使其具有脈動效果。所以我們可以說，我們定義這個圈子裏是這樣的：CSS動畫：更改元素的邊框寬度

.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; 
}

然後我定義動畫，從而改變邊界的「厚度」（如火狐）

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

這裏的問題是，由於尺寸的變化，整個物體本身向下和向右移動。我如何防止它做到這一點？我希望對象保持在同一個地方，只是邊框調整大小。你能幫助我嗎？

這裏有一個的jsfiddle顯示問題：http://jsfiddle.net/Oinobareion/rRTgk/

提前感謝！

來源

2013-04-30 Oinobareion

而不是改變邊框尺寸，只是嘗試應用scale轉換，例如，

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

例如jsbin（適用於Firefox只）：http://jsbin.com/ejejet/3/edit

如果你想十個分量，而不是你的原創動畫嘗試也增加

-moz-box-sizing: border-box;

您元素的樣式：這使得可以改變邊界寬度而不影響元素本身的大小和位置。

例jsbin（適用於Firefox只）：http://jsbin.com/ejejet/4/edit

作爲一個側面說明，你的動畫可以簡化這樣的：

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

因爲你只改變border-width財產

來源

2013-04-30 14:08:38 fcalderan

是的，我想過這個和它的實際工作。但這不是我想要的效果:-)無論如何。 – Oinobareion 2013-04-30 14:15:07

@Oinobareion也許我的編輯可以幫助 – fcalderan 2013-04-30 14:22:52

這也適用，但它調整了圈子的「內部」。當圈內有文字時，這看起來很奇怪。 – Oinobareion 2013-04-30 14:26:45

我現在用3個獨立的元素來做，就像這樣。它有點複雜，但至少可以工作:-) 2具有相同位置的元素位於第一個圓圈的後面並調整大小。

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>

來源

2013-04-30 14:59:14 Oinobareion

CSS動畫：更改元素的邊框寬度

回答

相關問題