Created
September 18, 2012 18:06
-
-
Save bbrewer97202/3744722 to your computer and use it in GitHub Desktop.
Simple CSS3 pulsing circle animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div id="pulser"> | |
| <div class="pulse pulse1"></div> | |
| <div class="pulse pulse2"></div> | |
| <div class="pulse pulse3"></div> | |
| <div class="pulse pulse4"></div> | |
| </div> | |
| <style type="text/css"> | |
| body { background-color: #000; } | |
| .pulser { | |
| position: relative; | |
| } | |
| .pulse { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 400px; | |
| height: 400px; | |
| -webkit-border-radius: 50%; | |
| -moz-border-radius: 50%; | |
| border-radius: 50%; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .pulse1 { | |
| border: 15px solid #25e1f9; | |
| -webkit-animation: pulse1 4s linear infinite; | |
| -moz-animation: pulse1 4s linear infinite; | |
| animation: pulse1 4s linear infinite; | |
| } | |
| .pulse2 { | |
| border: 10px solid #25e1f9; | |
| -webkit-animation: pulse2 4s linear infinite; | |
| -moz-animation: pulse2 4s linear infinite; | |
| animation: pulse2 4s linear infinite; | |
| } | |
| .pulse3 { | |
| border: 12px solid #25e1f9; | |
| -webkit-animation: pulse3 4s linear infinite; | |
| -moz-animation: pulse3 4s linear infinite; | |
| animation: pulse3 4s linear infinite; | |
| } | |
| .pulse4 { | |
| border: 20px solid #25e1f9; | |
| -webkit-animation: pulse4 4s linear infinite; | |
| -moz-animation: pulse4 4s linear infinite; | |
| animation: pulse4 4s linear infinite; | |
| } | |
| /* moz */ | |
| @-moz-keyframes pulse1 { | |
| 0% { -moz-transform: scale(0); opacity: 0; } | |
| 20% { -moz-transform: scale(0); opacity: 0; } | |
| 40% { -moz-transform: scale(.2); opacity: .4; } | |
| 60% { -moz-transform: scale(.4); opacity: .6; } | |
| 100% { -moz-transform: scale(.6); opacity: 0; } | |
| } | |
| @-moz-keyframes pulse2 { | |
| 0% { -moz-transform: scale(0); opacity: 0; } | |
| 25% { -moz-transform: scale(.2); opacity: .7; } | |
| 40% { -moz-transform: scale(.4); opacity: .5; } | |
| 65% { -moz-transform: scale(.6); opacity: .3; } | |
| 100% { -moz-transform: scale(.8); opacity: 0; } | |
| } | |
| @-moz-keyframes pulse3 { | |
| 0% { -moz-transform: scale(.1); opacity: 0; } | |
| 25% { -moz-transform: scale(.3); opacity: .7; } | |
| 50% { -moz-transform: scale(.5); opacity: .5; } | |
| 75% { -moz-transform: scale(.6); opacity: .3; } | |
| 100% { -moz-transform: scale(.66); opacity: 0; } | |
| } | |
| @-moz-keyframes pulse4 { | |
| 0% { -moz-transform: scale(.1); opacity: 0; } | |
| 30% { -moz-transform: scale(.3); opacity: .6; } | |
| 80% { -moz-transform: scale(.6); opacity: .4; } | |
| 100% { -moz-transform: scale(.8); opacity: 0; } | |
| } | |
| /* webkit */ | |
| @-webkit-keyframes pulse1 { | |
| 0% { -webkit-transform: scale(0); opacity: 0; } | |
| 20% { -webkit-transform: scale(0); opacity: 0; } | |
| 40% { -webkit-transform: scale(.2); opacity: .4; } | |
| 60% { -webkit-transform: scale(.4); opacity: .6; } | |
| 100% { -webkit-transform: scale(.6); opacity: 0; } | |
| } | |
| @-webkit-keyframes pulse2 { | |
| 0% { -webkit-transform: scale(0); opacity: 0; } | |
| 25% { -webkit-transform: scale(.2); opacity: .7; } | |
| 40% { -webkit-transform: scale(.4); opacity: .5; } | |
| 65% { -webkit-transform: scale(.6); opacity: .3; } | |
| 100% { -webkit-transform: scale(.8); opacity: 0; } | |
| } | |
| @-webkit-keyframes pulse3 { | |
| 0% { -webkit-transform: scale(.1); opacity: 0; } | |
| 25% { -webkit-transform: scale(.3); opacity: .7; } | |
| 50% { -webkit-transform: scale(.5); opacity: .5; } | |
| 75% { -webkit-transform: scale(.6); opacity: .3; } | |
| 100% { -webkit-transform: scale(.66); opacity: 0; } | |
| } | |
| @-webkit-keyframes pulse4 { | |
| 0% { -webkit-transform: scale(.1); opacity: 0; } | |
| 30% { -webkit-transform: scale(.3); opacity: .6; } | |
| 80% { -webkit-transform: scale(.6); opacity: .4; } | |
| 100% { -webkit-transform: scale(.8); opacity: 0; } | |
| } | |
| </style> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Cool, but does not work in IE. I wanted to use this effect on a slider, as in the example of LayerSlider (http://kreaturamedia.com/layerslider-responsive-wordpress-slider-plugin/) site. In their case, runs on all browsers. Could you help me? Thanks! ([email protected])