1

Добрый день. Возникла проблема с анимацией CSS3 - почему-то не задается сглаживание анимации. Задается linear, а отображается как ease-out. Вот код:

<style>
.loader{
    border:35px #ddd solid;
    border-top-color:transparent;
    height:300px;
    width:300px;
    border-radius:185px;
    -webkit-border-radius:185px
}

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

.loader{
    animation-name:rotate;
    animation-duration:1s;
    animation-iteration-count:infinite;
    transition-timing-function:linear
}
.loader{
    -webkit-animation-name:rotate;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-transition-timing-function:linear
}
</style>

<div class="loader"></div>

Что я делаю не так?
Заранее спасибо.

1
  • Количество ответов говорит о количестве знающих CSS 3.
    – Oleg
    16 мар 2012 в 15:43

1 ответ 1

1

Напиши просто

.loader{
    -webkit-animation:rotate 1s infinite linear;
}

А вообще использовать -webkit и -moz расширения - моветон:

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

3
  • О_О Вах, шаман! А в чем была проблема? А вообще, у меня прописаны все расширения, просто не хотел сюда кидать всю эту простыню.
    – ling
    19 мар 2012 в 8:48
  • По поводу причины намекну так: замените в своем коде -webkit-transition-timing-function: linear на -webkit-animation-timing-function: linear
    – northerner
    19 мар 2012 в 10:29
  • Вот и доверяй после такого копипасте из интернетов. =( Еще раз спасибо.
    – ling
    19 мар 2012 в 11:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.