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

Question

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

Я пытаюсь скопировать индикатор активности Apple style (значок загрузки солнечных часов) с помощью анимации 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 его просто более очевидно, что после первого поворота есть пауза перед ним снова вращается. Именно от этой паузы я хочу избавиться.

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

664 6

css css3 animation webkit

6 ответов:

Comments

Ничего не найдено.

rrahlf · Accepted Answer · 2013-06-10 16:21:19

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

Ilan Biala · Accepted Answer · 2017-09-07 22:25:15

вы также можете заметить небольшое отставание, потому что 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);}
}
также то, что может быть более похожим на значок загрузки apple, будет анимацией, которая преобразует непрозрачность / цвет полос серого цвета вместо поворота икона.

Kinglybird · Accepted Answer · 2013-12-31 10:32:51

вы можете использовать анимацию следующим образом:
-webkit-animation: spin 1s infinite linear;

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

Tudor · Accepted Answer · 2010-10-28 08:51:52

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

Alex · Accepted Answer · 2010-04-06 13:52:24

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

по возможности замените .PNG с чем-то родным.

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

Chrome не дает мне пауз с помощью этого метода.

alex · Accepted Answer · 2013-08-21 10:26:03

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

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