Animate test

by Jayson Buquia

HTML

<div class="animate">
    
</div>

CSS

.animate {
    position: relative;
    top: 0;
    left: 0;
    width: 150px;
    height: 50px;
    background: lightGreen;
    transition: all 0s 1s;
}

@keyframes animateme{
    from {
        top: 0;        
    }
    50% {
        top: 50px;
        width: 150px;
    }
    to {
        top: 50px;
        width: 200px;
    }
}

.animated {
    animation: animateme 1s ease;
    top: 50px;
    width: 200px;
    }

JavaScript

$('.animate').click(function(){
	$(this).toggleClass('animated');
});