CSS3 Непрерывная анимация вращения (точно так же, как загрузка солнечных часов)

Я пытаюсь воспроизвести индикатор активности стиля Apple (значок загрузки солнечных дней) с помощью анимации PNG и CSS3. У меня есть изображение, вращающееся и выполняющее его непрерывно, но, похоже, задержка после завершения анимации до следующего вращения.

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

Я попытался изменить продолжительность анимации, но это не имеет никакого значения, если вы замедляете это прямо, говорите, что 5s его более очевидно, что после первого поворота происходит пауза, прежде чем она снова повернется. Это пауза, от которой я хочу избавиться.

Любая помощь очень ценится, спасибо.

Ответ 1

Ваша проблема в том, что вы поставили -webkit-TRANSITION-timing-function, если хотите -webkit-ANIMATION-timing-function. Ваши значения от 0 до 360 будут работать правильно.

Ответ 2

Вы также можете заметить небольшую задержку, так как 0deg и 360deg - одно и то же место, поэтому оно происходит от пятна 1 в круге до места 1. Это действительно незначительно, но для его исправления все, что вам нужно сделать, это изменить 360deg до 359deg

my jsfiddle иллюстрирует вашу анимацию:

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

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

Кроме того, что может быть более похоже на значок загрузки Apple, это будет анимация, которая пересекает прозрачность/цвет полос серого вместо поворота значка.

Ответ 3

Вы можете использовать анимацию следующим образом:

-webkit-animation: spin 1s infinite linear;

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

Ответ 4

Если вы ищете только версию webkit, это отличное: http://s3.amazonaws.com/37assets/svn/463-single_spinner.html из http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit

Ответ 5

Ваш код кажется правильным. Я предполагаю, что это связано с тем, что вы используете .png и способ, которым браузер перерисовывает объект при вращении, неэффективен, вызывая зависание (какой браузер вы тестируете?)

Если возможно, замените .png на что-то родное.

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

Chrome не дает мне никаких пауз, используя этот метод.

Ответ 6

Я создал небольшую библиотеку которая позволяет вам легко использовать тробер без изображений.

Он использует 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();

Example.