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:
- 15 oktober 2014 @ 13:24 [Huidige revisie] by Dave Zoontjes
- 15 oktober 2014 @ 13:24 by Dave Zoontjes
- 15 augustus 2014 @ 12:41 by Dave Zoontjes
- 15 augustus 2014 @ 12:39 by Dave Zoontjes
- 15 augustus 2014 @ 12:38 by Dave Zoontjes
- 15 juli 2014 @ 13:27 by Dave Zoontjes
Changes:
15 augustus 2014 @ 12:39 | Current Revision | ||
---|---|---|---|
Title | |||
Bouncy animated | 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 " ><div class="loader"> | <pre class="lang:default decode:true " ><div class="loader"> | ||
<span></span> | <span></span> | ||
<span></span> | <span></span> | ||
<span></span> | <span></span> | ||
</div></pre> | </div></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.
Handige snippet thanks
Snippet komt goed van pas, jippie
Handige snippet, thanks
Handige snippputtt, ty bro.