-webkit-animation을 사용하여 맥박 효과를 만드는 방법-바깥 쪽 고리

-webkit-animation을 사용하여 맥박 효과를 만드는 방법-바깥 쪽 고리

---

이 기사를 찾았습니다.

http://www.zurb.com/article/221/css3-animation-will-rock-your-world on css3 애니메이션.

---

위 사이트에서 볼 수 있지만 개인 사이트 www.imfrom.me에서 유사한 효과를 만들려고합니다.

내가 메인 주에있는 곳에 빨간 팁 상자가 있습니다. 위치를 나타내는 화살표로 펄스 링을 만들고 싶습니다.

---

코드로 업데이트 :

나는 아래에서 이것을 생각해 냈습니다 (여기에서 시도하십시오 : 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}
 }

---

위의 생각?

반지가 움직이고 사라지는 것처럼 어떻게 만들 수 있는지에 대한 아이디어가 있습니까?

---

불필요한 키 프레임이 많이 있습니다. 키 프레임을 개별 프레임으로 생각하지 말고 애니메이션의 "단계"로 생각하면 컴퓨터가 키 프레임 사이의 프레임을 채 웁니다.

다음은 많은 코드를 정리하고 애니메이션이 중앙에서 시작되도록하는 솔루션입니다.

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

---

또는 리플 펄스 효과를 원한다면 다음을 사용할 수 있습니다.

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

참고 URL : https://stackoverflow.com/questions/4910963/how-to-create-a-pulse-effect-using-webkit-animation-outward-rings