CSS动画 - 膨胀效果

Question

我想创建一个标准的ASCII字符的CSS动画（特别是：•）。我希望我的动画像this一样具有膨胀效果。不过出于某种原因，角色只是从左到右移动。它不会膨胀并恢复到正常尺寸，如您在此Bootply中所看到的。

我的代码如下所示：

<div class="container"> 
<div id="dot" class="dot">•</div> 
    <button id="expandButton">push me</button> 
</div> 

.dot { 
    font-size:3.0rem; 
} 

.dot-expand { 
    color:green; 
    animation: dot-expander 3.0s; 
} 

@keyframes dot-expander { 
    from { 
    transform: scale3d(1, 1, 1); 
    } 

    50% { 
    transform: scale3d(1.05, 1.05, 1.05); 
    } 

    to { 
    transform: scale3d(1, 1, 1); 
    } 
} 

我在做什么错？一切对我来说都是正确的。谢谢！

Answer 1

您可以通过使用scale而不是scale3D来简化CSS动画（特别是因为所有3个值都是相同的比例尺 - 这里使用scale3D没有任何好处）......也是1和1的比例尺之间的差异1.05对观众来说几乎是难以理解的，特别是如果需要3秒钟循环（至少在这种情况下，以元素的大小）。

这里的一个工作实施例（I编辑，以便其更清楚地示出时间和缩放比特。）

$('#expandButton').on('click', function() { 
 
    //toggleClass to turn off the animation on second button click. 
 
    \t $('#dot').toggleClass('dot-expand'); 
 
\t });

* {margin: 20px; } 
 

 
.dot { 
 
    border-radius: 50%; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: rgb(0,0,0); 
 
\t display: block; 
 
} 
 

 
.dot-expand { 
 
    animation: dot-expander 2s infinite; /* remove 'infinate' if you just want 1 cycle */ 
 
} 
 

 
@keyframes dot-expander { 
 
    0% { 
 
    background: rgb(0,0,0); 
 
    transform: scale(1); 
 
    } 
 

 
    50% { 
 
    background: rgb(0,255,0); 
 
    transform: scale(2.5); 
 
    } 
 

 
    100% { 
 
    background: rgb(0,0,0); 
 
    transform: scale(1); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div id="dot" class="dot"></div> 
 
    <button id="expandButton">push me</button> 
 
</div>

Answer 2

这不起作用，因为您试图用比例缩放文本元素。相反，使用CSS创建一个圆形div。

CSS：

.dot { 
    border-radius: 50%; 
    width: 25px; 
    height: 25px; 
    background: rgb(0,0,0); 
} 

.dot-expand { 
    background: rgb(0,255,0); 
    animation: dot-expander 3.0s; 
} 

@keyframes dot-expander { 
    from { 
    transform: scale3d(1, 1, 1); 
    } 

    50% { 
    transform: scale3d(1.05, 1.05, 1.05); 
    } 

    to { 
    transform: scale3d(1, 1, 1); 
    } 
} 

HTML：

<div class="container"> 
<div id="dot" class="dot">•</div> 
    <button id="expandButton">push me</button> 
</div> 

的JavaScript：

$('#expandButton').on('click', function() { 
    alert('here'); 
    $('#dot').addClass('dot-expand'); 
}); 

演示：http://www.bootply.com/9FwMTQQHoO

我建议你增加规模量，因为效果非常微妙。您可能还想在动画完成后删除.dot-expand类，因为目前动画只能播放一次。为了在没有页面重新加载的情况下再次播放动画，当按下按钮时，该类需要被移除并再次添加。