Using transform instead of box-shadow for user location dot pulse ani…

…mation (#5498)
mapbox · Jan 23, 2018 · 98999a6 · 98999a6
1 parent decea3f
commit 98999a6
Showing 1 changed file with 33 additions and 40 deletions.
diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css
@@ -354,56 +354,49 @@ a.mapboxgl-ctrl-logo {
 }
 
 .mapboxgl-user-location-dot {
-    background-color: #1DA1F2;
-    width: 16px;
-    height: 16px;
+    background-color: #1da1f2;
+    width: 15px;
+    height: 15px;
     border-radius: 50%;
-    box-shadow: 0 0 2px rgba(0,0,0,0.25);
-    border: 2px solid #fff;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
 }
-.mapboxgl-user-location-dot:after {
+.mapboxgl-user-location-dot::before {
+    background-color: #1da1f2;
     content: '';
-    display: block;
-    box-shadow: #1DA1F2 0 0 0 2px;
-    width: 16px;
-    height: 16px;
+    width: 15px;
+    height: 15px;
     border-radius: 50%;
-    position: relative;
-    z-index: -1;
-
-    -webkit-animation: mapboxgl-user-location-dot-pulse 2s;
-    -moz-animation: mapboxgl-user-location-dot-pulse 2s;
-    -ms-animation: mapboxgl-user-location-dot-pulse 2s;
-    animation: mapboxgl-user-location-dot-pulse 2s;
-
-    -webkit-animation-iteration-count: infinite;
-    -moz-animation-iteration-count: infinite;
-    -ms-animation-iteration-count: infinite;
-    animation-iteration-count: infinite;
+    position: absolute;
+    -webkit-animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    -moz-animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    -ms-animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    animation: mapboxgl-user-location-dot-pulse 2s infinite;
 }
+.mapboxgl-user-location-dot::after {
+    border-radius: 50%;
+    border: 2px solid #fff;
+    content: '';
+    height: 15px;
+    left: -2px;
+    position: absolute;
+    top: -2px;
+    width: 15px;
+}
+
 @-webkit-keyframes mapboxgl-user-location-dot-pulse {
-    0%   {   -webkit-box-shadow: 0 0 0 0 rgba(29, 161, 242, 0.8); }
-    70%  {   -webkit-box-shadow: 0 0 0 15px rgba(29, 161, 242, 0); }
-    242% {   -webkit-box-shadow: 0 0 0 0 rgba(29, 161, 242, 0); }
+    0%   { -webkit-transform: scale(1); opacity: 1; }
+    70%  { -webkit-transform: scale(3); opacity: 0; }
+    100% { -webkit-transform: scale(1); opacity: 0; }
 }
 @-ms-keyframes mapboxgl-user-location-dot-pulse {
-    0%   {   -ms-box-shadow: 0 0 0 0 rgba(29, 161, 242, 0.8); }
-    70%  {   -ms-box-shadow: 0 0 0 15px rgba(29, 161, 242, 0); }
-    242% {   -ms-box-shadow: 0 0 0 0 rgba(29, 161, 242, 0); }
+    0%   { -ms-transform: scale(1); opacity: 1; }
+    70%  { -ms-transform: scale(3); opacity: 0; }
+    100% { -ms-transform: scale(1); opacity: 0; }
 }
 @keyframes mapboxgl-user-location-dot-pulse {
-    0% {
-        -moz-box-shadow: 0 0 0 0 rgba(29, 161, 242, 0.8);
-             box-shadow: 0 0 0 0 rgba(29, 161, 242, 0.4);
-    }
-    70% {
-        -moz-box-shadow: 0 0 0 15px rgba(29, 161, 242, 0);
-             box-shadow: 0 0 0 15px rgba(29, 161, 242, 0);
-    }
-    100% {
-        -moz-box-shadow: 0 0 0 0 rgba(29, 161, 242, 0);
-             box-shadow: 0 0 0 0 rgba(29, 161, 242, 0);
-    }
+    0%   { transform: scale(1); opacity: 1; }
+    70%  { transform: scale(3); opacity: 0; }
+    100% { transform: scale(1); opacity: 0; }
 }
 .mapboxgl-user-location-dot-stale {
     background-color: #aaa;