Indicatore di volantini pulsanti con animazioni CSS3

Question

Desidero creare un'icona di indicatore di mappa pulsante personalizzata su una mappa Leaflet. Per motivi di apprendimento, non voglio utilizzare plugin di terze parti.

Sto usando il seguente codice CSS per la creazione del 'pulsating'-animation:

.gps_ring { 
    border: 3px solid #999; 
    -webkit-border-radius: 30px; 
    height: 18px; 
    width: 18px;  
    -webkit-animation: pulsate 1s ease-out; 
    -webkit-animation-iteration-count: infinite;  
} 
@-webkit-keyframes pulsate { 
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 
    50% {opacity: 1.0;} 
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} 
} 

sto usando di DivIcon al fine di modificare la visualizzazione di un marcatore del produttore (riferimento alla classe CSS sopra) :

// Define an icon called cssIcon 
var cssIcon = L.divIcon({ 
    // Specify a class name we can refer to in CSS. 
    className: 'gps_ring' 
}); 

// Create markers and set their icons to cssIcon 
L.marker([50.5, 30.5], {icon: cssIcon}).addTo(map); 

Questo approccio non funziona in questo momento. L'icona del marker animato appare sempre nell'angolo in alto a sinistra della mappa. Sembra che la trasformazione (scala) rompe la posizione attuale del marker:

BTW sto usando Chrome 44.x su Windows 7 e Yosemite.

ho creato un esempio minimo qui:

http://jsfiddle.net/christianjunk/q69qx45c/1/

cosa c'è di sbagliato? Perché l'animazione rompe la posizione della mappa del marker?

Answer 1

Dopo aver esaminato per un po 'più di tempo ho trovato un modo per risolvere il problema:

Ho cambiato il codice CSS slighlty:

.css-icon { 

} 

.gps_ring { 
    border: 3px solid #999; 
    -webkit-border-radius: 30px; 
    height: 18px; 
    width: 18px;  
    -webkit-animation: pulsate 1s ease-out; 
    -webkit-animation-iteration-count: infinite; 
    /*opacity: 0.0*/ 
} 

@-webkit-keyframes pulsate { 
     0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 
     50% {opacity: 1.0;} 
     100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} 
} 

E ho cambiato l'istanza della mia classe Divicon:

// Define an icon called cssIcon 
var cssIcon = L.divIcon({ 
    // Specify a class name we can refer to in CSS. 
    className: 'css-icon', 
    html: '<div class="gps_ring"></div>' 
    // Set marker width and height 
    ,iconSize: [22,22] 
    // ,iconAnchor: [11,11] 
}); 

Quanto segue ha fatto il trucco: ora sto usando il codice interno html interno per eseguire l'animazione CSS. Ciò manterrà la posizione dell'indicatore. Nota anche l'attributo iconSize, che ha la dimensione totale dell'icona dopo la trasformazione (21 px = ~ 18px x 1.2). L'impostazione in questo modo centra il cerchio animata alla coordinata:

esempio di lavoro: http://jsfiddle.net/christianjunk/waturuoz/

io ancora non riusciva a capire, perché il mio primo approccio non funzionava.

Answer 2

Il tuo approccio originale non ha funzionato perché hai usato la trasformazione (che anche Leaflet usa per posizionare i suoi indicatori).

Esempio di posizionamento Schemi che viene sovrascritta:

transform: translate3d(499px, 604px, 0px);