Skip to content

Instantly share code, notes, and snippets.

@romaricpascal

romaricpascal/index.html

Created February 23, 2017 15:32
Show Gist options
  • Save romaricpascal/21438f19981896e057e95b151a6d00e1 to your computer and use it in GitHub Desktop.
Save romaricpascal/21438f19981896e057e95b151a6d00e1 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/upEyucOv/8
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
body {
position: relative;
height: 100px;
border-bottom: solid 2px hsl(340, 5%, 75%);
}
.target {
height: 1em;
width: 1em;
border-radius: 100%;
background: hsl(100, 60%, 70%);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -0.5em;
}
</style>
<style id="jsbin-css">
/* Vendor prefixed version is still necessary: http://caniuse.com/#feat=css-animation. If you want your animation to play in webkit, that is :p*/
@-webkit-keyframes bouncing {
0% {
/* Kids, be careful when doing this at home
animating width, height and other properties
triggering layouts can hurt perfs (depending
on how much you do it of course) */
width: 1.05em;
height: 0.95em;
}
75% {
width: 1em;
height: 1em;
}
100% {
width: 0.9em;
height: 1.1em;
bottom: 50px;
}
}
@keyframes bouncing {
0% {
width: 1.1em;
height: 0.9em;
}
25% {
width: 1em;
height: 1em;
bottom: 0;
}
100% {
width: 0.9em;
height: 1.1em;
bottom: 50px;
}
}
.target-bouncing {
/* The `animation` property is shortcut for the various
animations properties you can set on an element: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations */
-webkit-animation: bouncing 1s ease-out alternate infinite;
animation: bouncing 1s ease-out alternate infinite;
}
</style>
</head>
<body>
<div class="target target-bouncing"></div>
<script id="jsbin-source-css" type="text/css">/* Vendor prefixed version is still necessary: http://caniuse.com/#feat=css-animation. If you want your animation to play in webkit, that is :p*/
@-webkit-keyframes bouncing {
0% {
/* Kids, be careful when doing this at home
animating width, height and other properties
triggering layouts can hurt perfs (depending
on how much you do it of course) */
width: 1.05em;
height: 0.95em;
}
75% {
width: 1em;
height: 1em;
}
100% {
width: 0.9em;
height: 1.1em;
bottom: 50px;
}
}
@keyframes bouncing {
0% {
width: 1.1em;
height: 0.9em;
}
25% {
width: 1em;
height: 1em;
bottom: 0;
}
100% {
width: 0.9em;
height: 1.1em;
bottom: 50px;
}
}
.target-bouncing {
/* The `animation` property is shortcut for the various
animations properties you can set on an element: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations */
-webkit-animation: bouncing 1s ease-out alternate infinite;
animation: bouncing 1s ease-out alternate infinite;
}</script>
</body>
</html>
Raw
jsbin.upEyucOv.css
/* Vendor prefixed version is still necessary: http://caniuse.com/#feat=css-animation. If you want your animation to play in webkit, that is :p*/
@-webkit-keyframes bouncing {
0% {
/* Kids, be careful when doing this at home
animating width, height and other properties
triggering layouts can hurt perfs (depending
on how much you do it of course) */
width: 1.05em;
height: 0.95em;
}
75% {
width: 1em;
height: 1em;
}
100% {
width: 0.9em;
height: 1.1em;
bottom: 50px;
}
}
@keyframes bouncing {
0% {
width: 1.1em;
height: 0.9em;
}
25% {
width: 1em;
height: 1em;
bottom: 0;
}
100% {
width: 0.9em;
height: 1.1em;
bottom: 50px;
}
}
.target-bouncing {
/* The `animation` property is shortcut for the various
animations properties you can set on an element: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations */
-webkit-animation: bouncing 1s ease-out alternate infinite;
animation: bouncing 1s ease-out alternate infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment