Rolling ball animation

by Anupama

HTML

<!--HTML: Use these classes for reference!-->
<div class="cont">
<div class="ball"></div>
<div class="ir hand"></div>
<div>

CSS

/* 
================================
A sample transition */
.playing .hand {
  margin-left: 30px;
  transition: margin-left .25s ease-in;
}

/* 
================================
Your code here! */
.playing .ball {
  /* make the ball roll after the hand hits it. */
  transition: margin-left 1s ease-out 0.25s;
  /* Hint: manipulate margin-left to roll it, just like with the hand above. */
   margin-left: 300px;
  /* Double hint: Don't forget about transition-delay! */
}


/* 
================================
Necessary CSS Below-- no need to edit */

.hand {
  background: url(http://s.cdpn.io/641/g_hand.png) 0 0 no-repeat;
  position: absolute; top: 0; left: 80px;
  width: 100px; height: 311px;
}

.ball {
  background: #0097C0;
  border-radius: 50%;
  position: absolute; top: 200px; left: 160px;
  width: 100px; height: 100px;
}

/* Image replacement */
.ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}
.ir br { display: none; }

JavaScript

var contElem = document.querySelector(".cont");
console.log("contElem:"+contElem);
contElem.classList.add("playing");