Box transform keyframes

by anup1986

HTML

<div class="assets-wrapper asset-recieved">
</div>

CSS

.assets-wrapper {
    margin: 20px auto;
    position:relative;
    width: 50px;
    height: 50px;
    background: rgba(67,67,67, 0.7);
    border-radius: 50%;
    border: 1px solid #73AD7F;
    overflow:hidden;
    box-sizing: border-box;
    
    opacity: 1;
    
}

.assets-wrapper.asset-recieved {
    -webkit-animation: scale-animation 2s linear;
}

@-webkit-keyframes scale-animation {
	0%, 100% {
		-webkit-transform: scale(1);
	}

	35% {
		-webkit-transform: scale(3);
        margin-top: 100px;
	}
    60% {
        -webkit-transform: scale(1.5);
        
    }
    70%{
        -webkit-transform: scale(3);
        margin-top: 400px;
    }
    80%{
        -webkit-transform: scale(1.5);
        
    }
    90%{
        -webkit-transform: scale(3);
        margin-top: 200px;
    }
}