Comment créer un effet d'impulsion en utilisant-webkit-animation-outward rings
J'ai trouvé cet article:
Http://www.zurb.com/article/221/css3-animation-will-rock-your-world sur les animations css3.
J'essaie de créer un effet similaire vu sur le site ci-dessus mais sur le site personnel à: www.imfrom.me
Où j'ai l'état du Maine, il y a la boîte de pointe rouge. Je veux créer un anneau d'impulsion par la flèche indiquant l'emplacement.
MISE À JOUR AVEC LE CODE:
Je suis venu avec ceci ci-dessous (essayez-le ici: http://jsfiddle.net/ftrJn/) comme vous pouvez le dire, toutes les pensées sur la façon dont je peux le faire grandir 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}
}
Réflexions sur ce qui précède?
Des idées sur la façon dont je peux créer quelque chose comme ça comme si les anneaux s'animent et s'estompent?
2 réponses
Vous avez beaucoup d'images clés inutiles. Ne pensez pas aux images clés comme des images individuelles, pensez-y comme des "étapes" dans votre animation et l'ordinateur remplit les images entre les images clés.
Voici une solution qui nettoie beaucoup de code et fait partir l'animation 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;}
}
Comme Vous pouvez le voir en action ici: http://jsfiddle.net/Fy8vD/
Ou si vous voulez un effet d'impulsion d'ondulation, vous pouvez utiliser ceci:
Http://jsfiddle.net/Fy8vD/3041/
.gps_ring {
border: 2px solid #fff;
-webkit-border-radius: 50%;
height: 18px;
width: 18px;
position: absolute;
left:20px;
top:214px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
.gps_ring:before {
content:"";
display:block;
border: 2px solid #fff;
-webkit-border-radius: 50%;
height: 30px;
width: 30px;
position: absolute;
left:-8px;
top:-8px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0.1s;
opacity: 0.0;
}
.gps_ring:after {
content:"";
display:block;
border:2px solid #fff;
-webkit-border-radius: 50%;
height: 50px;
width: 50px;
position: absolute;
left:-18px;
top:-18px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0.2s;
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;}
}