Использование CSS3-преобразований/анимаций с помощью font-face создает "шаткий" spinner gif-like

Я использую CSS-преобразования/анимации с font-face (twitter bootstrap/font-awesome), чтобы создать spinner gif-like значок.

Проблема в том, что иконка колеблется, когда она вращается вокруг 360 градусов. Посмотрите этот JSFiddle, чтобы понять, что я имею в виду. Кто-нибудь знает, как сделать это не вобуляции? Или, по крайней мере, заставить его вращаться немного плавно?

Здесь приведен код ниже:

CSS

i.icon-repeat {
  -webkit-animation: Rotate 500ms infinite linear;
  -moz-animation: Rotate 500ms infinite linear;
  -ms-animation: Rotate 500ms infinite linear;
  -o-animation: Rotate 500ms infinite linear;
  animation: Rotate 500ms infinite linear;
}
@-o-keyframes Rotate {
  from {-o-transform:rotate(0deg);}
  to {-o-transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
 from {-moz-transform:rotate(0deg);}
 to {-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate {
  from {-ms-transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg);}
}
@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes Rotate {
  from { transform:rotate(0deg);}
  to { transform:rotate(360deg);}
}
#iconRepeatMain{
  display: inline-block;    
  position: absolute;
  z-index:10007;
  left: 50%;
  top: 50%;
  margin-left: -24px; /* -1 * image width / 2 */
  margin-top: -24px;  /* -1 * image height / 2 */
  font-size:36px;
}

HTML:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<i id='iconRepeatMain' class='icon-repeat' style='font-size:36px; color:red'></i>

Примечание:, если кто-то хочет использовать этот код в своем собственном веб-приложении, обязательно удалите этот счетчик из DOM, когда действие, необходимое для этого, будет выполнено. Сохранение этого значка, вращающегося в фоновом режиме, сжигает CPU независимо от браузера, как вы не поверите. Кроме того, простое изменение его видимости, т.е. display:none, не работает. Вам нужно удалить его из DOM, например: $('#iconRepeatMain').remove();

Ответ 1

По умолчанию CSS преобразует информацию об их вертикальном и горизонтальном центре с свойством transform-origin. Кратковременным синтаксисом для этого значения по умолчанию является 50% 50%, который представляет значение x, а затем значение y начала координат.

Для этого значка, я обнаружил, что смещение y-начала до 38% сглаживает его немного, но вам нужно поиграть с ним, чтобы получить точные значения. Просмотр в JSFiddle

i.icon-repeat {
  -webkit-transform-origin:50% 38%;
  -moz-transform-origin:50% 38%;
  -ms-transform-origin:50% 38%;
  -o-transform-origin:50% 38%;
  transform-origin: 50% 38%;
}

Подробнее о свойстве transform-origin я рекомендую статью MDN об этом свойстве.

Ответ 2

Попробуйте установить для элемента определенную высоту и ширину. Через пробную версию и ошибку я обнаружил, что добавление:

#iconRepeatMain {
    width: 26px;
    height: 19px;
}

центрирует шрифт довольно хорошо и, похоже, устраняет колебания. Однако, возможно, это зависит от того, какой браузер используется - тщательно протестируйте его.

http://jsfiddle.net/mblase75/pGhFX/13/

Ответ 3

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

<i class="icon-repeat icon-spin"></i>

... хотя я предполагаю, что это действительно предназначено для иконки-spinner icon:

<i class="icon-spinner icon-spin"></i>

Edit: d'oh... это зависит от более позднего шрифта awesome.css, чем тот, который приведен в вашем примере. Так что, может быть, ответ в том, что они сами исправили качание. Однако класс со стрелкой-символом является новым.

Ответ 4

Как я решил свою проблему с внецентровым вращением шрифта значка: Я решил несколько вопросов: 1. Размер значка: он должен быть размером всего px (например, font-size: small; мой значок 17.5px, поэтому центр не является абсолютным центром для преобразования) 2. Определение отображения: блок на уровне значка делает его центром правильно в середине родительского div 3. Определение точного квадратного размера родительского div (в моей кнопке) и фиксированное заполнение сделали его центром правильно 4. добавление любой теневой тени изменит размер внутреннего значка, чтобы он был вне центра. Трюк состоит в том, чтобы изменить стиль наведения на одну и ту же тень с цветом, аналогичным фону в моем случае

Итак, вот код:

CSS

button.close {
padding: 10px;
opacity: 0.8;
text-shadow: 1px 1px 1px #999; 
width: 40px;
height: 40px;
}
button.close i{
font-size: 20px;
max-width: 20px;
max-height: 20px;
display: block;
}
button.close:hover {
text-shadow: 1px 1px 1px #fff; 
}
/* rotation CSS*/
@keyframes anim-rotate {
0% {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes anim-rotate-next {
0% {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotate{
animation: anim-rotate-next 1s normal linear;
}
.rotate.down{
animation: anim-rotate 1s normal linear;
}

HTML:

<button type="button" class="close"><i class="lnr lnr-sync rotate"></i></button>

и, наконец, JQuery для переключения класса rotate JQuery:

$("#parentDiv").on('click', 'i.lnr-sync', function () {
// rotiraj ikonu
$(this).toggleClass("down");
});