Skip to content

Instantly share code, notes, and snippets.

@joshbeckman

joshbeckman/gist:8023913

Last active December 31, 2015 17:59
Show Gist options
  • Save joshbeckman/8023913 to your computer and use it in GitHub Desktop.
Save joshbeckman/8023913 to your computer and use it in GitHub Desktop.
Download ZIP
Bouncing bars animation
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
<title>Animated Bars</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
body{
margin:0;
}
.foo{
margin:0 auto;
padding: 20px 0;
background-color: white;
width:500px;
text-align: center;
}
.bar{
width:5px;
border-radius: 3px;
height:50px;
background-color: coral;
display: inline-block;
margin: 0 3px;
position: relative;
z-index: 10;
}
.bar:nth-child(1){
-webkit-animation: rise 2s linear infinite alternate, opa 5.25s ease-in-out infinite alternate;
-moz-animation: rise 2s linear infinite alternate, opa 5.25s ease-in-out infinite alternate;
-ms-animation: rise 2s linear infinite alternate, opa 5.25s ease-in-out infinite alternate;
-o-animation: rise 2s linear infinite alternate, opa 5.25s ease-in-out infinite alternate;
animation: rise 2s linear infinite alternate, opa 5.25s ease-in-out infinite alternate;
}
.bar:nth-child(2){
-webkit-animation: rise 2.05s ease-in-out infinite alternate, opa 4.25s ease-in-out infinite alternate;
-moz-animation: rise 2.05s ease-in-out infinite alternate, opa 4.25s ease-in-out infinite alternate;
-ms-animation: rise 2.05s ease-in-out infinite alternate, opa 4.25s ease-in-out infinite alternate;
-o-animation: rise 2.05s ease-in-out infinite alternate, opa 4.25s ease-in-out infinite alternate;
animation: rise 2.05s ease-in-out infinite alternate, opa 4.25s ease-in-out infinite alternate;
}
.bar:nth-child(3){
-webkit-animation: rise 2.25s ease-in-out infinite alternate, opa 3.25s ease-in-out infinite alternate;
-moz-animation: rise 2.25s ease-in-out infinite alternate, opa 3.25s ease-in-out infinite alternate;
-ms-animation: rise 2.25s ease-in-out infinite alternate, opa 3.25s ease-in-out infinite alternate;
-o-animation: rise 2.25s ease-in-out infinite alternate, opa 3.25s ease-in-out infinite alternate;
animation: rise 2.25s ease-in-out infinite alternate, opa 3.25s ease-in-out infinite alternate;
}
.bar:nth-child(4){
-webkit-animation: rise 1.95s ease-in-out infinite alternate, opa 2.25s ease-in-out infinite alternate;
-moz-animation: rise 1.95s ease-in-out infinite alternate, opa 2.25s ease-in-out infinite alternate;
-ms-animation: rise 1.95s ease-in-out infinite alternate, opa 2.25s ease-in-out infinite alternate;
-o-animation: rise 1.95s ease-in-out infinite alternate, opa 2.25s ease-in-out infinite alternate;
animation: rise 1.95s ease-in-out infinite alternate, opa 2.25s ease-in-out infinite alternate;
}
@keyframes rise {
33% {
-webkit-transform:translateY(10px);
}
66% {
-webkit-transform:translateY(-15px);
}
99% {
-webkit-transform:translateY(0px);
}
}
@-o-keyframes rise {
33% {
-webkit-transform:translateY(10px);
}
66% {
-webkit-transform:translateY(-15px);
}
99% {
-webkit-transform:translateY(0px);
}
}
@-moz-keyframes rise {
33% {
-webkit-transform:translateY(10px);
}
66% {
-webkit-transform:translateY(-15px);
}
99% {
-webkit-transform:translateY(0px);
}
}
@-ms-keyframes rise {
33% {
-webkit-transform:translateY(10px);
}
66% {
-webkit-transform:translateY(-15px);
}
99% {
-webkit-transform:translateY(0px);
}
}
@-webkit-keyframes rise {
33% {
-webkit-transform:translateY(10px);
}
66% {
-webkit-transform:translateY(-15px);
}
99% {
-webkit-transform:translateY(0px);
}
}
@-webkit-keyframes opa {
12% {
opacity: .8;
}
19.5% {
opacity: .88;
}
37.2% {
opacity: .64;
}
40.5% {
opacity: .52;
}
52.7% {
opacity: .69;
}
60.2% {
opacity: .6;
}
66.6% {
opacity: .52;
}
70% {
opacity: .63;
}
79.9% {
opacity: .6;
}
84.2% {
opacity: .75;
}
91% {
opacity: .87;
}
}@-moz-keyframes opa {
12% {
opacity: .8;
}
19.5% {
opacity: .88;
}
37.2% {
opacity: .64;
}
40.5% {
opacity: .52;
}
52.7% {
opacity: .69;
}
60.2% {
opacity: .6;
}
66.6% {
opacity: .52;
}
70% {
opacity: .63;
}
79.9% {
opacity: .6;
}
84.2% {
opacity: .75;
}
91% {
opacity: .87;
}
}@-ms-keyframes opa {
12% {
opacity: .8;
}
19.5% {
opacity: .88;
}
37.2% {
opacity: .64;
}
40.5% {
opacity: .52;
}
52.7% {
opacity: .69;
}
60.2% {
opacity: .6;
}
66.6% {
opacity: .52;
}
70% {
opacity: .63;
}
79.9% {
opacity: .6;
}
84.2% {
opacity: .75;
}
91% {
opacity: .87;
}
}@-o-keyframes opa {
12% {
opacity: .8;
}
19.5% {
opacity: .88;
}
37.2% {
opacity: .64;
}
40.5% {
opacity: .52;
}
52.7% {
opacity: .69;
}
60.2% {
opacity: .6;
}
66.6% {
opacity: .52;
}
70% {
opacity: .63;
}
79.9% {
opacity: .6;
}
84.2% {
opacity: .75;
}
91% {
opacity: .87;
}
}@keyframes opa {
12% {
opacity: .8;
}
19.5% {
opacity: .88;
}
37.2% {
opacity: .64;
}
40.5% {
opacity: .52;
}
52.7% {
opacity: .69;
}
60.2% {
opacity: .6;
}
66.6% {
opacity: .52;
}
70% {
opacity: .63;
}
79.9% {
opacity: .6;
}
84.2% {
opacity: .75;
}
91% {
opacity: .87;
}
}
</style>
</head>
<body>
<div class="foo">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment