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의 배율과 배율의 차이 1.05는 시청자에게 거의 이해할 수 없으며, 특히 순환하는 데 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> 

자바 스크립트 :

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

데모 : http://www.bootply.com/9FwMTQQHoO

효과가 매우 미묘하기 때문에 축척을 높이는 것이 좋습니다. 현재 애니메이션을 한 번만 재생할 수 있기 때문에 애니메이션이 끝난 후 .dot-expand 클래스를 제거 할 수도 있습니다. 페이지를 다시로드하지 않고 애니메이션을 다시 재생하려면 버튼을 누를 때 클래스를 제거하고 다시 추가해야합니다.