Cách tạo hiệu ứng xung bằng cách sử dụng -webkit-animation - các vòng ngoài

Question

Tôi đã tìm thấy bài viết này:

http://www.zurb.com/article/221/css3-animation-will-rock-your-world trên hình động css3.

---

tôi đang cố gắng để tạo ra một hiệu ứng tương tự xuất hiện trên các trang web trên nhưng trên trang web cá nhân tại địa chỉ: www.imfrom.me

Nơi tôi có bang Maine, có màu đỏ hộp tip. Tôi muốn tạo một vòng xung bằng mũi tên chỉ vị trí.

---

CẬP NHẬT VỚI Mã sản phẩm:

tôi đã đưa ra dưới đây (thử nó ở đây: http://jsfiddle.net/ftrJn/) như bạn có thể nói gần nó, bất kỳ suy nghĩ về làm thế nào tôi có thể lấy nó để phát triển từ trung tâm:

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

---

Suy nghĩ ở trên?

Bất kỳ ý tưởng nào về cách tôi có thể tạo ra thứ gì đó tương tự như thể nhẫn hoạt hình và biến mất?

Answer 1

Bạn có rất nhiều khung hình không cần thiết. Đừng nghĩ về khung hình chính là các khung hình riêng lẻ, hãy nghĩ chúng là "các bước" trong hoạt ảnh của bạn và máy tính sẽ lấp đầy các khung giữa các khung hình chính.

Đây là một giải pháp mà dọn dẹp rất nhiều mã và làm cho sự bắt đầu hoạt hình từ trung tâm:

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

Bạn có thể nhìn thấy nó trong hành động ở đây: http://jsfiddle.net/Fy8vD/

Answer 2

Hoặc nếu bạn muốn có một gợn hiệu lực thi hành xung, bạn có thể sử dụng này:

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