web-dev-qa-db-fra.com

Comment créer un effet Pulse à l'aide de -webkit-animation - sonneries extérieures

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 à l'adresse: www.imfrom.me

Là où j'ai l'état du Maine, il y a la boîte rouge. Je veux créer un anneau d'impulsion par la flèche indiquant l'emplacement.

MIS À JOUR AVEC CODE:

Je suis venu avec ceci ci-dessous (essayez-le ici: http://jsfiddle.net/ftrJn/ ) comme vous pouvez le dire de près, toute idée sur la façon dont je peux le faire pousser à 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}
 }

Des pensées à ce sujet?

Des idées sur la façon dont je peux créer quelque chose comme ça, comme si les anneaux s'animaient et disparaissaient?

animationcss3webkit
60
Coughlin

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/

145
methodofaction

Ou si vous voulez un effet d’onde pulsée, 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;}
}
8
mariuspearson