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

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

---

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

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

애니메이션 지속 시간을 변경하려고 시도했지만 차이가 없습니다. 오른쪽 속도를 늦추면 첫 번째 회전 후에 다시 회전하기 전에 일시 중지가 있다는 것이 더 분명합니다. 제거하고 싶은 일시 중지입니다.

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

---

여기서 문제는을 -webkit-TRANSITION-timing-function원할 때를 제공했다는 것 -webkit-ANIMATION-timing-function입니다. 0에서 360 사이의 값이 올바르게 작동합니다.

---

0deg와 360deg가 동일한 지점이기 때문에 약간의 지연이 발생할 수 있으므로 원의 지점 1에서 다시 지점 1로 이동합니다. 실제로 중요하지는 않지만 해결하려면 360deg를 다음으로 변경하면됩니다. 359도

내 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://s3.amazonaws.com/37assets/svn/463-single_spinner.html 에서 http://37signals.com/svn/posts/2577-loading- 스피너 애니메이션 사용 CSS 및 웹킷

---

Your code seems correct. I would presume it is something to do with the fact you are using a .png and the way the browser redraws the object upon rotation is inefficient, causing the hang (what browser are you testing under?)

If possible replace the .png with something native.

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

Chrome gives me no pauses using this method.

---

I made a small library that lets you easily use a throbber without images.

It uses CSS3 but falls back onto JavaScript if the browser doesn't support it.

// 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();

Example.

참고URL : https://stackoverflow.com/questions/2584138/css3-continuous-rotate-animation-just-like-a-loading-sundial