You are viewing an old revision of this post, from 15 augustus 2014 @ 12:41. 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:41 | Current Revision | ||
---|---|---|---|
Title | |||
Bouncy animated | Bouncy animated animation |
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.