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

scale3Dではなくscaleを使用するだけでCSSアニメーションを単純化することができます（特に3つの値はすべて同じスケールであるため、ここでscale3Dを使用する利点はありません）...スケール1とスケールの違い特に、この場合、要素のサイズで、サイクルに3秒かかる場合には、視聴者にとってはほとんど理解できません。ここで

は、実施例だ（それがより明確に示されているように、私は時間とビットスケーリングを編集しました。）

$('#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

スケールの量を増やすことをお勧めします。効果は非常に微妙です。現在のところアニメーションは1回しか再生できないため、アニメーションの終了後に.dot-expandクラスを削除することもできます。アニメーションをページの再ロードなしで再度再生するには、ボタンを押したときにクラスを削除してから再度追加する必要があります。