javascript - buffer animation google maps not showing -
i make buffer animation in google maps. when run in web no working. use javascript , php make .
this php code:
<html> <head> <title>google map</title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=aizasyd21hditqz1rba2uu8z9i922vpfp5dgdze&sensor=false"></script> <script type="text/javascript"> $(document).ready(function() { var map; var mycity = new google.maps.latlng(51.5120, -0.12); var bigone = new google.maps.latlng(51.5120, -0.12); var smallone = new google.maps.latlng(51.5120, -0.12); var options = { zoom: 14, center: mycity, scalecontrol: true, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map($('#map')[0], options); var mycity = new google.maps.circle({ center: bigone, radius: 150, strokecolor: "#e16d65", strokeweight: 2, fillcolor: "#e16d65", fillopacity: 0 }); var smallcircle = new google.maps.circle({ center: smallone, radius: 300, strokecolor: "#e16d65", strokeopacity: 1, strokeweight: 2, fillcolor: "#e16d65", fillopacity: 0 }); mycity.setmap(map); smallcircle.setmap(map); }); </script> <style type="text/css"> #animation { position: relative; width: 100%; height: 200px; background: #eee; } #map { height: 400px; width: 100%; } .dot { position: absolute; top: 80px; left: 150px; background: #00c0ff; box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .5); height: 0; width: 0; padding: 4px; border-radius: 5000px; } .dot:before, .dot:after { position: absolute; content:" "; border-radius: inherit; height: 0px; width: 0px; box-shadow: 0 0 2px 2px #ff0000; transform: translate(-50%, -50%); animation: pulseinner 2s infinite ease-out; } .dot:after { height: 7px; width: 7px; box-shadow: 0 0 4px 2px #ffff00; animation: pulseouter 2s infinite ease-out; } @-webkit-keyframes { 0% { height: 0; width: 0; opacity: 0; } 20% { opacity: 1 } 95% { height: 125px; width: 125px; opacity: 0.25; } 100% { opacity: 0; } } @-moz-keyframes { 0% { height: 0; width: 0; opacity: 0; } 20% { opacity: 1 } 95% { height: 125px; width: 125px; opacity: 0.25; } 100% { opacity: 0; } } @keyframes pulseinner { 0% { height: 0; width: 0; opacity: 0; } 20% { opacity: 1 } 95% { height: 125px; width: 125px; opacity: 0.25; } 100% { opacity: 0; } } @-webkit-keyframes { 0% { height: 7px; width: 7px; opacity: 0; } 20% { opacity: 1 } 100% { height: 250px; width: 250px; opacity: 0.25; } } @-moz-keyframes { 0% { height: 7px; width: 7px; opacity: 0; } 20% { opacity: 1 } 100% { height: 250px; width: 250px; opacity: 0.25; } } @keyframes pulseouter { 0% { height: 7px; width: 7px; opacity: 0; } 20% { opacity: 1 } 100% { height: 250px; width: 250px; opacity: 0.25; } } </style> </head> <body> <div id="animation"> <div class="dot"></div> </div> <hr> <div id="map"></div> </body> </html> i don't know whats problem . there no result in web. can me? thank you
there many syntax related problems in code. working demo: http://jsfiddle.net/gcu2d/202/
you forgot add animation name in
-moz-keyframes,-webkit-keyframes.you didn't added browser specific css animation rules such
-webkit-animation,-moz-animation. sametransition,transformcss propertyyou missed closing
styletag in post itself. not sure whether missed same in actual code.
for more details on animation syntax, can refer animation syntax.
Comments
Post a Comment