Как создать импульсный эффект с помощью-webkit-анимация-внешние кольца

Question

Как создать импульсный эффект с помощью-webkit-анимация-внешние кольца

Я нашел эту статью:

http://www.zurb.com/article/221/css3-animation-will-rock-your-world на CSS3 анимации.

Я пытаюсь создать аналогичный эффект, наблюдаемый на сайте выше, но на личном сайте по адресу: www.imfrom.me

где у меня есть штат Мэн, есть красный наконечник коробки. Я хочу создать импульсное кольцо стрелкой, указывающей местоположение.

ОБНОВЛЕНО С КОДОМ:

I придумал это ниже (попробуйте здесь:http://jsfiddle.net/ftrJn/) Как вы можете сказать его близко, любые мысли о том, как я могу заставить его расти из центра:

.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}

 }

мысли об этом выше?

любые идеи о том, как я могу создать что-то подобное, как будто кольца оживают и исчезают?

585 2

css3 animation webkit

2 ответов:

Comments

Ничего не найдено.

Duopixel · Accepted Answer · 2012-09-24 06:22:14

у вас есть много лишних кадров. Не думайте о ключевых кадрах как об отдельных кадрах, думайте о них как о "шагах" в вашей анимации, и компьютер заполняет кадры между ключевыми кадрами.

вот решение, которое очищает много кода и делает анимацию начать с центра:
.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;}
}
вы можете увидеть его в действии здесь: http://jsfiddle.net/Fy8vD/

mariuspearson · Accepted Answer · 2016-11-29 19:25:26

или если вы хотите эффект пульсации импульса, вы можете использовать это:

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;}
}