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類，因爲目前動畫只能播放一次。爲了在沒有頁面重新加載的情況下再次播放動畫，當按下按鈕時，該類需要被移除並再次添加。