키 프레임 스케일 변환 후 iOS에서 이미지가 전체 크기로 깜박임

Question

페이지를 가로 질러 날아가는 모양을 아래의 CSS로 실행하면 이상한 IOS 글리치가 발생합니다. 모양이 전체 크기로 시작한 다음 천천히 축소되어 사라 지지만 Safari 또는 iOS의 Chrome에서 애니메이션이 끝날 때 전체 이미지 크기로 완전히 불투명하게 깜박입니다. 잠깐입니다 만,이 객체들 중 15 개가 페이지를 가로 질러 날아 다니는 것은 팝콘과 같습니다. 여기에서 문제를 미리 볼 수 있습니다 : http://visier.rps.is/. 어떤 일이 벌어지고있는가?

#logo-one { 
    opacity: 0; 
    background: url("../img/animation-sprites.png") no-repeat; 
    width: 52px; 
    height: 58px; 
    background-position: 0 0; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-animation: changeSize-one 3s 5s infinite linear both; 
    -moz-animation: changeSize-one 3s 5s infinite linear both; 
    -o-animation: changeSize-one 3s 5s infinite linear both; 
    animation: changeSize-one 3s 5s infinite linear both; 
    right: -52px; 
    position: absolute; 
} 
@-webkit-keyframes changeSize-one { 
    0% { 
    opacity: 1; 
    transform: rotate(0deg) scale(1); 
    -ms-transform: rotate(0deg) scale(1); 
    -webkit-transform: rotate(0deg) scale(1); 
    top: 120px; 
    right: -52px; 
    } 
    50% { 
    opacity: .5; 
    transform: rotate(15deg) scale(0.77); 
    -ms-transform: rotate(15deg) scale(0.77); 
    -webkit-transform: rotate(15deg) scale(0.77); 
    right: 200px; 
    top: 60px; 
    } 
    100% { 
    opacity: 0; 
    transform: rotate(30deg) scale(0.29); 
    -ms-transform: rotate(30deg) scale(0.29); 
    -webkit-transform: rotate(30deg) scale(0.29); 
    right: 430px; 
    top: 0; 
    } 
} 
} 

Answer 1

변환을 사용하면 변환 할 수 있습니다 : 상단 및 오른쪽 대신 CSS 속성을 변환 하시겠습니까?

transform: rotate(*) scale(*) translate(50px,100px);