Skip to content

Instantly share code, notes, and snippets.

@imkevinxu

imkevinxu/README.md

Last active December 10, 2015 07:38
Show Gist options
  • Save imkevinxu/4402301 to your computer and use it in GitHub Desktop.
Save imkevinxu/4402301 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Bounce Effect
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Bounce Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS Bounce Effect</h1>
<div class="circle bounce"></div>
<img class="bounce" src="http://placekitten.com/130/130" alt="Place Kitten Cuteeee">
<h2>Credits</h2>
<ol>
<li><a href="https://github.com/podrivo" target="_blank">Pedro Ivo Hudson</a> for the <a href="http://thegoodman.cc/" target="_blank">The Goodman</a></li>
<li><a href="https://gist.github.com/imkevinxu" target="_blank">Kevin Xu</a> and his random free time</li>
</ol>
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</body>
</html>
Raw
style.css
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 500px;
margin: 50px auto;
color: #444;
}
h1, h2 { font-weight: 400; }
p, li { line-height: 23px; }
a { color: steelBlue; }
a:not(:hover) { text-decoration: none; }
/* Uses -prefix-free for cleaner unprefixed CSS
http://leaverou.github.com/prefixfree/ */
.circle {
background: #FA8072;
width: 130px;
height: 130px;
border-radius: 65px;
margin: 50px;
display: inline-block;
}
img {
border-radius: 65px;
margin: 50px;
display: inline-block;
}
.bounce {
animation: bounce 1s .5s;
transform: scale(0.85);
}
@keyframes bounce {
0% { transform: scale(1.1); opacity: 1 }
50% { transform: scale(1.6); opacity: .7; }
60% { transform: scale(0.6); opacity: 1 }
80% { transform: scale(0.95) }
100% { transform: scale(0.85) }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment