CSS3 Continuous Rotate Animation (как солнечные часы при загрузке) - PullRequest
Новая
       29

CSS3 Continuous Rotate Animation (как солнечные часы при загрузке)

120 голосов
/ 06 апреля 2010

Я пытаюсь скопировать индикатор активности в стиле 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;
    }

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

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

Ответы [ 6 ]

71 голосов
/ 16 июня 2010

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

53 голосов
/ 03 сентября 2012

Вы также можете заметить небольшое отставание, потому что 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);}
}

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

27 голосов
/ 31 декабря 2013

Вы можете использовать анимацию так: 

-webkit-animation: spin 1s infinite linear;

@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}
}
8 голосов
/ 28 октября 2010
1 голос
/ 21 августа 2013

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

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

Пример .

1 голос
/ 06 апреля 2010

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

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

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

Chrome не дает мне никаких пауз при использовании этого метода.

...