CSS3 Animation Tests

by Neviton

HTML

<div id="btn" class="ani">
    <div class="ani">
        <div class="ani"></div>
    </div>
</div>

CSS

body {
    background-color: #C10250;
    padding: 50px;
}

.ani {
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 20px;
    border-color: #03BCC0 #D2D945 #FCB040 #FF5850;
    border-radius: 50%;
    transition: all 1s;
}

.ani > .ani {
    width: 60px;
    height: 60px;
}

.ani > .ani > .ani {
    width: 20px;
    height: 20px;
}

.ani:hover {
    transform: rotate(360deg) scale(1.2, 1.2);
}

@-webkit-keyframes transition-in {
  0% {
    transform: scale(1.2, 1.2);
    box-shadow: 0 0 10px 5px #fff, inset 0 0 10px 5px #fff ;
  }
  25% {
    transform: scale(1.0, 1.0);
  }
  100% {
    transform: scale(1.2, 1.2);
  }
}

.in {
    -webkit-animation-name: transition-in;
    -webkit-animation-duration: 0.25s;
    /*-webkit-animation-iteration-count: 2;*/
}

JavaScript

$('#btn').on('click', function(){
    console.log('click');
    $('#btn').removeClass('in');
    
    setTimeout(function(){
        $('#btn').addClass('in');
    }, 0);
});