MOving Ball

by Ninay is Unknown

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--HTML: Use these classes for reference!-->
<div class="ball"></div>
<img class="paw" src="https://s3.amazonaws.com/stash.rachelnabors.com/codepen/css-animation-workshop/paw.png" />

CSS

/* 
================================
A sample transition */
.paw {
  transition: transform .25s ease-in;
}

.playing .paw {
  transform: translateX(30px);
}


/* 
================================
Your code here! */

/* Double hint: Don't forget about transition-delay! */
.ball{
  transition: transform 1s .25s;
}
.playing .ball{
  transform: translateX(235px);
  background-color:red;
  border:10px solid black;
}

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

.paw {
  position: absolute; top: 0; left: 80px;
}

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

body { background: #e3edf2; }

/* CP_DoFullRefresh */

JavaScript

$(window).load(function(){
  $("body").addClass("playing");
});