Skip to content

Instantly share code, notes, and snippets.

@ahultgren
Created April 24, 2012 20:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ahultgren/2483458 to your computer and use it in GitHub Desktop.
Save ahultgren/2483458 to your computer and use it in GitHub Desktop.
Bouncing ball that stops bouncing
/**
* Bouncing ball that stops bouncing
*/
#boll {
background: #f00;
border-radius: 10px;
height: 20px;
width: 20px;
position: absolute;
bottom: 0;
left: 0;
animation: studs 0.3s ease-out infinite alternate, move 5s ease-out both;
}
body:hover #boll,
body:hover #frame {
animation-play-state: paused;
}
#frame {
position: relative;
height: 300px;
animation: gravity 4s ease-in both;
}
@keyframes studs {
to {
bottom: 100%;
}
}
@keyframes move {
to {
left: 1000px;
}
}
@keyframes gravity{
to {
height: 0px;
margin-top: 300px;
}
}
<div id="frame"><div id="boll"></div></div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment