Question

我正在尝试为圆的边框宽度设置动画，以使其产生脉动效果。所以我们假设我们这样定义这个圈子：

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

提前致谢！

Answer 1

不要改变边框大小，只需尝试应用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属性

Answer 2

我现在用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>

CSS Animation：更改元素的边框宽度

2 个答案: