css div bounce animation

bounce the div using css

by padma rubhan

HTML

<div class="row">
    <div class="col-sm-4 steps">
    <div class="step-1 animated bounceIn"></div>        
    </div>

</div>

CSS

.animated {
	-webkit-animation-iteration-count: 1;
	 -moz-animation-iteration-count: 1;
	   -ms-animation-iteration-count: 1;
		-o-animation-iteration-count: 1;
		animation-iteration-count: 1;
 
	 -webkit-animation-duration:1s;
	 -moz-animation-duration:1s;
	 -ms-animation-duration:1s;
	 -o-animation-duration:1s;
	 animation-duration:1s;
   background: red;
  width: 100px;
  height: 100px;
 }
 
 @keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }
    40% {
        opacity: 1;
        transform: scale(1.05);
    }
    60% {
        transform: scale(0.5);
    }
    70% {
        transform: scale(1);
    }
    80% {
        transform: scale(0.7);
    }
    90% {
        transform: scale(0.85);
    }

    100% {
        transform: scale(1);
    }
 }
 .bounceIn {
 
	 animation-name: bounceIn;
 }
 .slideUp {
   animation: slide-up 2500ms ease-in-out;
 }