CSS3 키 프레임 이동하지 않고 이미지 서클을 실행하는 방법

CSS3 키 프레임을 사용하여 움직이지 않고 이미지 서클을 실행합니다. 즉, 휠과 같은 의미지만 움직이지 않는 서클은 그대로 있습니다.CSS3 키 프레임 이동하지 않고 이미지 서클을 실행하는 방법

.step_7 { 
background: url(../images/step7.png) no-repeat center top, url(../images/outer_glow.png) no-repeat 0 -7px; 
top: 377px; 
left: 417px; 
width:102px; 
height: 104px; 
z-index: 4; 
} 
@-webkit-keyframes circle-run 
{ 
    0%{ 
     -webkit-transform:rotate(0deg); 
    } 
    100% 
    { 
     -webkit-transform:rotate(360deg); 
    } 
} 

.animation { 
    -webkit-animation: circle-run 2s infinite; 
    -webkit-animation-timing-function:linear; 
}

Javascipt : 여기

$('.btn1_inv').click(function() { 
     $('.step_7').addClass('animation'); 
    });

내 샘플 코드입니다 : 여기

내 CSS 코드이 위의 코드에서 http://jsfiddle.net/vLwDc/25/

, 내 요소를 실행하지만 그것은 이동 조금, 어떻게 고칠 수 있니? 미리 감사드립니다.

출처

2012-03-01 NevenHuynh

왜 흔들리는가? 그렇다면 그것은 coz 폭 높이가 다르므로 완벽한 원형이 아니기 때문에 비슷할 것입니다 – Val

안녕하세요 Val, 내 원이 너비와 높이가 똑같지 않기 때문에 이것은 내 실수입니다 – NevenHuynh

당신이 무엇을하려하는지 이해하지 못합니다. 하지만 원이 완벽하게 원이라면 원이 애니메이션임을 알 수 있습니다. 기본적으로 "정적으로 보이는 애니메이션" – Val

왜 흔들리는가? 그렇다면 너는 너비가 다르기 때문에 높이가 다르므로 완벽한 원형이 아니기 때문에 그렇게 될 것입니다.

출처

2012-05-03 11:47:41 Val

CSS3 키 프레임 이동하지 않고 이미지 서클을 실행하는 방법

답변

관련 문제