0

円の境界幅をアニメーション化して、脈動効果を与えようとしています。では、この円を次のように定義するとしましょう。

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

次に、境界線の「太さ」を変更するアニメーションを定義します (例: Firefox の場合)。

@-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/

前もって感謝します！

4

2 に答える 2

3

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-30T14:08:38.587 に答える
0

私は今、このように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-30T14:59:14.623 に答える