A simple animation with the use of CSS transitions
A Pen by Kannan Kumar on CodePen.
A simple animation with the use of CSS transitions
A Pen by Kannan Kumar on CodePen.
<button id="reset">Reset</button> | |
<button id="play">Play</button> | |
<div class="grayball"></div> | |
<div class="blueball"></div> | |
<div class="redball"></div> |
$(window).load(function(){ | |
$("#play").on("click",function(){ | |
$("body") | |
.removeClass("backward") | |
.addClass("forward"); | |
}) | |
$("#reset").on("click",function(){ | |
$("body") | |
.removeClass("forward") | |
.addClass("backward"); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
.redball { | |
background: red; | |
border-radius: 50%; | |
position: absolute; top: 150px; left: 430px; | |
width: 100px; height: 100px; | |
} | |
.blueball { | |
background: blue; | |
border-radius: 50%; | |
position: absolute; top: 50px; left: 430px; | |
width: 100px; height: 100px; | |
} | |
.grayball { | |
background: gray; | |
border-radius: 50%; | |
position: absolute; top: 100px; left: -100px; | |
width: 100px; height: 100px; | |
} | |
.forward .grayball{ | |
margin-left:650px; | |
transition: margin-left 2s ease-in-out 0.25s; | |
} | |
.forward .blueball{ | |
margin-left:650px; | |
top: 0px; | |
transition: margin-left 2s ease-out 1.5s, | |
top 2s ease-out 1.5s; | |
} | |
.forward .redball{ | |
margin-left:650px; | |
top:300px; | |
transition: margin-left 2s ease-out 1.5s, | |
top 2s ease-out 1.5s; | |
} | |
.backward .grayball{ | |
margin-left:0px; | |
transition: margin-left 2s ease-out 1.75s; | |
} | |
.backward .blueball{ | |
margin-left:0px; | |
top: 50px; | |
transition: margin-left 2s linear 0.25s, | |
top 2s linear 0.25s; | |
} | |
.backward .redball{ | |
margin-left:0px; | |
top:150px; | |
transition: margin-left 2s linear 0.25s, | |
top 2s linear 0.25s; | |
} |