Comment créer un effet de pouls en utilisant -webkit-animation - sonneries extérieures

Question

J'ai trouvé cet article:

http://www.zurb.com/article/221/css3-animation-will-rock-your-world sur les animations css3.

---

Je suis en train de créer un effet similaire vu sur le site ci-dessus mais sur un site personnel à: www.imfrom.me

Lorsque j'ai de l'état du Maine, il y a la pointe rouge de la boîte. Je veux créer une bague d'impulsions par la flèche indique l'emplacement.

---

MISE À JOUR AVEC LE CODE:

Je suis venu avec cette ci-dessous (l'essayer ici: http://jsfiddle.net/ftrJn/) comme vous pouvez le dire à ses proches, de vos réflexions sur la façon dont je peux l'obtenir à croître à partir du centre:

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;
    position: absolute;
    left:20px;
    top:214px;
}
.gps_ring{
    -webkit-animation-name: pulsate;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite
}
@-webkit-keyframes pulsate {
    0% { width:1px;height: 1px; opacity: 0.0}
    10% { width:3px;height: 3px; opacity: .20}
    20% { width:5px;height: 5px; opacity: .40 }
    30% { width:7px;height: 7px; opacity: .60 }
    40% { width:9px;height: 9px; opacity: .80 } 
    50% { width:11px;height: 11px; opacity: 1.0}
    60% { width:13px;height: 13px; opacity: .80}
    70% { width:15px;height: 15px;  opacity: .60}
    80% { width:17px;height: 17px;  opacity: .40}
    90% { width:19px;height: 19px;  opacity: .20}
    100% { width:21px;height: 21px;  opacity: 0.0}
 }

---

Pensées sur ce qui précède?

Des idées sur comment je peux créer quelque chose comme ça, comme si les anneaux animer et disparaître?

Answer 1

Vous avez beaucoup d'images clés inutiles. Ne considérez pas les images clés comme des images individuelles, mais plutôt comme des "étapes" dans votre animation. L'ordinateur remplit les images entre les images clés.

Voici une solution qui nettoie beaucoup de code et fait démarrer l'animation à partir du centre:

 .gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;
    position: absolute;
    left:20px;
    top:214px;
    -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;}
}
 

Vous pouvez le voir en action ici: http://jsfiddle.net/Fy8vD/