Basic CSS Animation

Basic CSS Animation.markdown

Basic CSS Animation

A simple animation with the use of CSS transitions

A Pen by Kannan Kumar on CodePen.

License.

index.html

<button id="reset">Reset</button>
<button id="play">Play</button>
<div class="grayball"></div>
<div class="blueball"></div>
<div class="redball"></div>

script.js

$(window).load(function(){
  $("#play").on("click",function(){
    $("body")
      .removeClass("backward")
      .addClass("forward");
  })
  $("#reset").on("click",function(){
    $("body")
      .removeClass("forward")
      .addClass("backward");
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.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;
     
}