Simple animated map marker using css3 keyframes to animate a border/object size to create a pulsating effect
Created
September 23, 2013 19:33
-
-
Save anonymous/6675734 to your computer and use it in GitHub Desktop.
A Pen by roybarber.
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
| <body> | |
| <div class="marker"> | |
| <div class="dot"></div> | |
| <div class="pulse"></div> | |
| </div> | |
| </body> |
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
| /* Roy Barber - RoyBarber.com */ |
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
| body { | |
| margin:80px 40px; | |
| } | |
| .marker { | |
| margin-top: 20px; | |
| margin-left: 30px; | |
| position: relative; | |
| } | |
| .pulse { | |
| width: 10px; | |
| height: 10px; | |
| border: 5px solid #7fd2e6; | |
| -webkit-border-radius: 30px; | |
| -moz-border-radius: 30px; | |
| border-radius: 30px; | |
| background-color: #00a6cd; | |
| z-index: 10; | |
| position: absolute; | |
| } | |
| .dot { | |
| position: absolute; | |
| height: 50px; | |
| width: 50px; | |
| top: -25px; | |
| left: -25px; | |
| z-index: 2; | |
| opacity: 0; | |
| border: 10px solid rgba(0,166,205,1);; | |
| background: transparent; | |
| -webkit-border-radius: 60px; | |
| -moz-border-radius: 60px; | |
| border-radius: 60px; | |
| -webkit-animation: flash 2s ease-out; | |
| -moz-animation: flash 2s ease-out; | |
| animation: flash 2s ease-out; | |
| -webkit-animation-iteration-count: infinite; | |
| -moz-animation-iteration-count: infinite; | |
| animation-iteration-count: infinite; | |
| } | |
| @-moz-keyframes pulse { | |
| 0% {-moz-transform: scale(0);opacity: 0.0;} | |
| 25% {-moz-transform: scale(0);opacity: 0.1;} | |
| 50% {-moz-transform: scale(0.1);opacity: 0.3;} | |
| 75% {-moz-transform: scale(0.5);opacity: 0.5;} | |
| 100% {-moz-transform: scale(1);opacity: 0.0;} | |
| } | |
| @-webkit-keyframes "flash" { | |
| 0% {-webkit-transform: scale(0);opacity: 0.0;} | |
| 25% {-webkit-transform: scale(0);opacity: 0.1;} | |
| 50% {-webkit-transform: scale(0.1);opacity: 0.3;} | |
| 75% {-webkit-transform: scale(0.5);opacity: 0.5;} | |
| 100% {-webkit-transform: scale(1);opacity: 0.0;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment