Анимированная FontAwesome в Css

Я пишу веб-сайт, который не использует загрузку. Таким образом, для того, чтобы использовать шрифт-устрашающий Я использую следующие правила CSSАнимированная FontAwesome в Css

CSS

[data-icon]:before { 
    font-family: 'FontAwesome'; 
    font-size: 90%; 
    color: white; 
    margin-right: .5em; 
    content: attr(data-icon); 
    speak: none; 
    z-index: 11; 
} 
.icon-alone { 
    display: inline-block; 
}

И я использую его в HTML, как, например:

<head> 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
</head> 
<body> 
    <span data-icon="&#xf110;"></span> 
</body>

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

Возможно ли это с использованием правил css ...

Большое спасибо

источник

2014-01-20 Ismail Moghul

Да, они используют следующие:

@-moz-keyframes spin { 
0% { 
    transform: rotate(0deg); 
} 
100% { 
    transform: rotate(359deg); 
} 
} 
.fa-spin { 
    animation: 2s linear 0s normal none infinite spin; 
}

(Возможно, с другими приставками поставщика, а, но они, кажется, нюхать браузер и отправить только соответствующий.)

источник

2014-01-20 08:26:00

Спасибо, но это похоже, вращается вокруг нецентральной точки (то есть справа от центра) ... Есть ли способ решить эту проблему ... –

Вам нужно будет проверить [соответствующий CSS-код] (http: // fontawesome.io/assets/font-awesome/css/font-awesome.css). –

Я считаю, что это то, что вы ищете:

Continuous CSS rotation animation on hover, animated back to 0deg on hover out

Я думаю, что вы хотите значок «загрузки» крутиться бесконечно. Если вы хотите приобрести этот эффект с помощью javascript, вы можете просто использовать jQuery и .css-метод с помощью setInterval. Я считаю, что это лучший подход, так как я слышал, что у них были некоторые проблемы с jsFiddle в других браузерах, чем у «webkit».

источник

2014-01-20 08:25:46

Анимированная FontAwesome в Css

ответ

Смежные вопросы