Проблема, связанная с запуском Bootstrap3

Вдохновленный Fontawesome, я пытаюсь сделать вращающийся значок с bootstrap3. Это легко достигается с помощью перехода CSS3 и преобразования. Проблема в том, что значок не вращается вокруг центра. Он вращается во время вращения.

Код, вставленный ниже. Кто-нибудь знает, что вызывает проблему?

.spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<link href="#" onclick="location.href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
 <h1 class="text-center">
    <span class="glyphicon glyphicon-refresh spin"></span>
    <span class="glyphicon glyphicon-record spin"></span>
    </h1>

ОТВЕТЫ

Ответ 1

Проблема заключается в том, что вы вращаете элемент, который не центрирован в вашем диапазоне.

Если вы хотите получить реальное решение, добавьте transform-origin в .spin, чтобы изменить центр вращения

.spin{
     -webkit-transform-origin: 50% 58%;
     transform-origin:50% 58%;
     -ms-transform-origin:50% 58%; /* IE 9 */
     -webkit-animation: spin .2s infinite linear;
     -moz-animation: spin .2s infinite linear;
     -o-animation: spin .2s infinite linear;
     animation: spin .2s infinite linear;
}

http://jsfiddle.net/L4zTu/5/

Ответ 2

Я написал блог об этом. Просто сравните глификон с пользовательским классом:

<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>

Класс glyphicon-spin был создан путем изучения класса fa-spin в таблице стилей FontAwesome:

h4 {
    font-size:18px;
    font-weight:bold;
}
.fa-spin-custom, .glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<h4>FontAwesome</h4>

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

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-refresh fa-spin-custom"></i>

<br />
<br />

<h4>Glyphicons</h4>
 <span class="glyphicon glyphicon-refresh glyphicon-spin"></span>

Ответ 3

Дополнительная точка, если следовать этому примеру.

Определения ключевого кадра должны учитывать случай, когда некоторые свойства будут префиксом для не-поставщиков, а другие - нет. Например, в Chrome 35 текущие определения ключевого кадра не будут работать, поскольку ключевые кадры не являются префиксом поставщика, но преобразование все еще есть.

Что-то вроде этого должно учитывать все текущие/будущие случаи:

@-moz-keyframes spin
{
    from
    {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

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

@keyframes spin
{
    from
    {
        -wekbit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to
    {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Ответ 5

Ни один из вышеперечисленных работал для меня, но это:

.spin {
        animation: spin infinite 4s linear;
        height: 80px;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

Ответ 6

Надеюсь, это поможет кому-то использовать font-awesome.

Просто попробуй это.

<span class="sync-state pull-right" style="display: none;">
    <i class="fa fa-refresh fa-spin"></i> synching..
</span>

Затем в своем javascript просто получите элемент по классу onclick или при наведении курсора, который когда-либо вам подходит.

$(".sync-state").fadeIn();

После события вы можете

$(".sync-state").fadeOut();

Надеюсь, это поможет. Jquery & Font-устрашающий

Ответ 7

Bootstrap предоставляет вам определенную библиотеку классов для этого. Используйте класс "icon-spin" вместе со своим классом значков Например: - <i class="icon-refresh icon-spin"></i >