무한 CSS3 애니메이션의 끝에 글리치/깜박임/깜박임

필수 코드이지만 jsFiddle이 문제를 정확하게 보여줍니다. 나는 3 초 이상 확장하고 사라지는 원이 있습니다. 소나르 스타일이 제 의도입니다. 이 문제는 애니메이션이 완료되면 빠르게 깜박이며 다시 시작됩니다. 무한 CSS3 애니메이션의 끝에 글리치/깜박임/깜박임

여기에 문제를 참조하십시오 http://jsfiddle.net/39MJL/3/

@-webkit-keyframes pulsate /* Safari and Chrome */{ 
    0% {width:150px;height:150px;top:-178px;opacity:0.5;} 
    100% {width:900px;height:900px;top:-550px;opacity:0.1;border: 3px solid rgba(192, 61, 29,  .9)} 
} 
#pulse1 { border-radius:50%;position:relative;height:150px;width:150px;top:-178px; 
    opacity:0.3; margin:0 auto;z-index:-1;border:1px solid #da4521;background-color:#DA785A; 
    animation: pulsate 3s infinite; 
    -webkit-animation: pulsate 3s infinite; 
}

누구 전에이 문제로 실행 했습니까? 문제가 표시되지 않는 경우 사용중인 브라우저를 공유해 주시겠습니까?

편집 : 바이올린의 다른 브라우저에 애니메이션 지원이 추가되었습니다. 제거 용이함

출처

2014-01-10 brdu

내가 알아낼 수있는 것으로부터 볼 수있는 깜박임은 opacity:0.5이 애니메이션이 다시 시작되면서 다시 설정되지만 원을 이동하기 전에 (한 프레임에 표시됨)입니다.

아마도 가장 우아한 것은 아닙니다. 추가 키 프레임을 추가하고 height:0px을 설정하여 애니메이션이 다시 시작되기 전에 원형을 확보 할 수 있습니다.

CSS :

@keyframes pulsate { 
    0% {width:150px;height:150px;top:-178px;opacity:0.5;} 
    90% {width:900px;height:900px;top:-550px;opacity:0.0;border: 3px solid rgba(192, 61, 29, .9)} 
    99% {width:900px;height:900px;top:-550px;opacity:0.0;border: 3px solid rgba(192, 61, 29, .9)} 
    100% {width:900px;height:0px;top:-550px;opacity:0.0;border: 3px solid rgba(192, 61, 29, .9)} 
}

FIDDLE - 나는 또한 opacity:0.0;에 키 프레임을 설정 때문에 원이 완전히 페이드 아웃. 이제 불투명도 레벨 및 키 프레임 %로 놀 필요가 있습니다.

출처

2014-01-24 16:34:30 badAdviceGuy

답변에 시간을내어 해결해 주셔서 감사합니다. 특히 나는 그것이 묻혔다 고 확신합니다. 필자는 포지션이 계산되기 전에 불투명도 애니메이션이 완료되었다는 결론을 내 렸습니다. 이것은 내가 아는 한 - 웹킷 만의 문제이기도합니다. 편집 : 내 솔루션은 당신과 매우 유사했습니다 :) – brdu

무한 CSS3 애니메이션의 끝에 글리치/깜박임/깜박임

답변

관련 문제