CSS3 Continuous Rotate Animation (로드하는 해시계처럼)

PNG 및 CSS3 애니메이션을 사용하여 Apple 스타일 활동 표시기 (선달로드 아이콘)를 복제하려고합니다. 이미지가 회전하고 계속되는데 애니메이션이 끝난 후 다음 회전을하기 전에 지연이있는 것 같습니다.

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}
#loading img
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: linear;
    }

애니메이션 지속 시간을 변경해 보았지만 차이가 없습니다. 5 초를 느리게하면 첫 번째 회전 후 다시 회전하기 전에 일시 중지가 있다는 것이 더 분명합니다. 제거하고 싶은이 일시 정지입니다.

어떤 도움이라도 대단히 감사합니다.

여기서 문제 -webkit-TRANSITION-timing-function는 -webkit-ANIMATION-timing-function. 0에서 360 사이의 값이 제대로 작동합니다.

0deg와 360deg가 같은 지점이므로 약간의 지연이있을 수 있습니다. 따라서 원의 지점 1에서 지점 1로 다시 이동합니다. 정말 중요하지 않지만 수정하려면 360deg를 다음으로 변경하기 만하면됩니다. 359deg

내 jsfiddle은 애니메이션을 보여줍니다.

#myImg {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

또한 사과 로딩 아이콘과 더 비슷할 수있는 것은 아이콘을 회전하는 대신 회색 줄무늬의 불투명도 / 색상을 전환하는 애니메이션입니다.

다음과 같은 애니메이션을 사용할 수 있습니다.

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}

웹킷 버전 만 찾고 있다면 멋집니다. http://37signals.com/svn/posts/2577-loading- 에서 http://s3.amazonaws.com/37assets/svn/463-single_spinner.html css 및 웹킷을 사용하여 스피너 애니메이션

코드가 올바른 것 같습니다. 나는 그것이 당신이 .png를 사용하고 있다는 사실과 관련이 있고 브라우저가 회전시 객체를 다시 그리는 방식이 비효율적이어서 중단을 유발한다고 가정합니다 (어떤 브라우저에서 테스트하고 있습니까?)

가능하면 .png를 네이티브로 대체하십시오.

보다; http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/

이 방법을 사용하면 Chrome이 중단되지 않습니다.

이미지 없이도 쉽게 스 로버를 사용할 수 있는 작은 라이브러리 를 만들었습니다 .

CSS3를 사용하지만 브라우저가 지원하지 않으면 JavaScript로 돌아갑니다.

// First argument is a reference to a container element in which you
// wish to add a throbber to.
// Second argument is the duration in which you want the throbber to
// complete one full circle.
var throbber = throbbage(document.getElementById("container"), 1000);

// Start the throbber.
throbber.play();

// Pause the throbber.
throbber.pause();

예 .