Skip to content

Instantly share code, notes, and snippets.

@karuna24s

karuna24s/index.html

Created February 11, 2017 17:42
Show Gist options
  • Save karuna24s/c5f2efe01587e8c1d36614aaebf40440 to your computer and use it in GitHub Desktop.
Save karuna24s/c5f2efe01587e8c1d36614aaebf40440 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=c5f2efe01587e8c1d36614aaebf40440
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Ball</title>
</head>
<body>
<div class="ball"></div>
<div class="shadow"></div>
</body>
</html>
Raw
styles.css
.ball {
width: 150px;
height: 150px;
border-radius: 150px;
margin-left: 200px;
background-color: darkturquoise;
animation-name: bounce;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.shadow {
width: 150px;
height: 50px;
border-radius: 50%;
background-color: gray;
margin-left: 200px;
margin-top: 400px;
animation-name: shadowing;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes shadowing {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes bounce {
0% {
transform: translate(0, 0px);
-webkit-transform: translate(0, 0px);
}
50% {
transform: translate(0, 400px);
-webkit-transform: translate(0, 400px);
}
100% {
transform: translate(0, 0px);
-webkit-transform: translate(0, 0px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment