Bouncy animated animation

3.33/5(3)

You are viewing an old revision of this post, from 15 augustus 2014 @ 12:39. See below for differences between this version and the current revision.

Just some funzies with CSS3 animations. If you are worried about super deep browser support, use a Gif image.

Demo:



HTML:

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>

CSS3:

.loader {
    text-align: center;    
}
.loader span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: black;
    border-radius: 50px;
    -webkit-animation: loader 0.9s infinite alternate;
    -moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -webkit-transform: translateY(-21px);
  }
}
@-moz-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -moz-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -moz-transform: translateY(-21px);
  }
}

Post Revisions:

Changes:

15 augustus 2014 @ 12:39Current Revision
Title
Bouncy animated loading animation  Bouncy animated animation
Content
Just some funzies with CSS3 animations. If you are worried about super deep browser support, use a Gif image. Just some funzies with CSS3 animations. If you are worried about super deep browser support, use a Gif image.
Demo: Demo:
<style type="text/css"> <style type="text/css">
  .stay {
   height: 300px;
  }
.loader { .loader {
text-align: center;   text-align: center;
} }
.loader span { .loader span {
display: inline-block;  display: inline-block;
vertical-align: middle;  vertical-align: middle;
width: 10px;  width: 10px;
height: 10px;  height: 10px;
margin: 50px auto;  margin: 50px auto;
background: black;  background: black;
border-radius: 50px;  border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;  -webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;  -moz-animation: loader 0.9s infinite alternate;
} }
.loader span:nth-of-type(2) { .loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;  -webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;  -moz-animation-delay: 0.3s;
} }
.loader span:nth-of-type(3) { .loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;  -webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;  -moz-animation-delay: 0.6s;
} }
@-webkit-keyframes loader { @-webkit-keyframes loader {
0% {  0% {
width: 10px;  width: 10px;
height: 10px;  height: 10px;
opacity: 0.9;  opacity: 0.9;
-webkit-transform: translateY(0);  -webkit-transform: translateY(0);
}  }
100% {  100% {
width: 24px;  width: 24px;
height: 24px;  height: 24px;
opacity: 0.1;  opacity: 0.1;
-webkit-transform: translateY(-21px);  -webkit-transform: translateY(-21px);
}  }
} }
@-moz-keyframes loader { @-moz-keyframes loader {
0% {  0% {
width: 10px;  width: 10px;
height: 10px;  height: 10px;
opacity: 0.9;  opacity: 0.9;
-moz-transform: translateY(0);  -moz-transform: translateY(0);
}  }
100% {  100% {
width: 24px;  width: 24px;
height: 24px;  height: 24px;
opacity: 0.1;  opacity: 0.1;
-moz-transform: translateY(-21px);  -moz-transform: translateY(-21px);
}  }
} }
</style> </style>
  <div class="stay">
<div class="loader"> <div class="loader">
<span></span>  <span></span>
<span></span>  <span></span>
<span></span>  <span></span>
  </div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
HTML: HTML:
 
<pre class="lang:default decode:true " >&lt;div class="loader"&gt; <pre class="lang:default decode:true " >&lt;div class="loader"&gt;
&lt;span&gt;&lt;/span&gt;  &lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;  &lt;span&gt;&lt;/span&gt;
&lt;span&gt;&lt;/span&gt;  &lt;span&gt;&lt;/span&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
CSS3: CSS3:
 
<pre class="lang:default decode:true " >.loader { <pre class="lang:default decode:true " >.loader {
text-align: center;   text-align: center;
} }
.loader span { .loader span {
display: inline-block;  display: inline-block;
vertical-align: middle;  vertical-align: middle;
width: 10px;  width: 10px;
height: 10px;  height: 10px;
margin: 50px auto;  margin: 50px auto;
background: black;  background: black;
border-radius: 50px;  border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;  -webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;  -moz-animation: loader 0.9s infinite alternate;
} }
.loader span:nth-of-type(2) { .loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;  -webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;  -moz-animation-delay: 0.3s;
} }
.loader span:nth-of-type(3) { .loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;  -webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;  -moz-animation-delay: 0.6s;
} }
@-webkit-keyframes loader { @-webkit-keyframes loader {
0% {  0% {
width: 10px;  width: 10px;
height: 10px;  height: 10px;
opacity: 0.9;  opacity: 0.9;
-webkit-transform: translateY(0);  -webkit-transform: translateY(0);
}  }
100% {  100% {
width: 24px;  width: 24px;
height: 24px;  height: 24px;
opacity: 0.1;  opacity: 0.1;
-webkit-transform: translateY(-21px);  -webkit-transform: translateY(-21px);
}  }
} }
@-moz-keyframes loader { @-moz-keyframes loader {
0% {  0% {
width: 10px;  width: 10px;
height: 10px;  height: 10px;
opacity: 0.9;  opacity: 0.9;
-moz-transform: translateY(0);  -moz-transform: translateY(0);
}  }
100% {  100% {
width: 24px;  width: 24px;
height: 24px;  height: 24px;
opacity: 0.1;  opacity: 0.1;
-moz-transform: translateY(-21px);  -moz-transform: translateY(-21px);
}  }
}</pre> }</pre>

Note: Spaces may be added to comparison text to allow better line wrapping.

Please rate this