새로고침 애니메이션 효과

<p class="refresh_js">새로 고침
  <span class="refreshIcon_js">
    <img src="/asset/images/refresh.png" width="100%" alt="새로고침" title="새로고침">
  </span>
</p>

p > span.spin {animation:spin .5s ease-in;}
@keyframes spin{
  to { transform: rotate(360deg) }
}

$('.refresh_js').click(function(){
  $('.refreshIcon_js').addClass('spin');
  setTimeout(function(){
    $('.refreshIcon_js').removeClass('spin');
  }, 500);
});

참고사이트

 

https://jsfiddle.net/dimlucas/5f8vyx2x/1/

CSS Refresh Animation Trigger - JSFiddle - Code Playground