Как сгладить анимацию CSS3?

Question

Я сделал простую анимацию CSS3, но она очень грубая. Он движется очень зубчатым. Есть ли способ сгладить анимацию и сделать ее более естественной? Я пытаюсь сделать логотип Microsoft Cortona.

HTML-:

<div name="CortanaRing1" id="CortonaRing1" class="CortonaRing1"> 

</div> 

CSS-:

#CortonaRing1 { 
    border-radius: 50%; 
    animation-duration: 4s; 
    border: 30px solid #000; 
    animation-name: Cortona; 
    animation-iteration-count: infinite; 
    background-color: transparent; 
    color: #FFF; 
    margin: 0 0 0 0; 
    float: left; 
    width: 250px; 
    min-width: 250px; 
    max-width: 250px; 
    height: 250px; 
    min-height: 250px; 
    max-height: 250px; 
} 

@keyframes Cortona { 
    0% { 
      border: 30px solid #000; 
      margin: 0 0 0 0; 
     } 

    25% { 
      border: 25px solid #000; 
      margin: 5px 0 0 5px; 
     } 

    50% { 
      border: 30px solid #000; 
      margin: 0 0 0 0; 
     } 
    100%{ 
      border: 25px solid #000; 
      margin: 5px 0 0 5px; 
     } 
} 

Вы можете увидеть демо моего кода работает над этим JSFiddle: http://jsfiddle.net/gjvhsje6/

Answer 1

Одна вещь, если вы не хотите, что В частности, вы можете исключить последний шаг анимации. Таким образом, первое состояние и последнее состояние будет таким же, избегая скачок, который вы видите, когда анимация заканчивается:

@keyframes Cortona { 
    0% { 
      border: 30px solid #000; 
      margin: 0 0 0 0; 
     } 

    50% { 
      border: 25px solid #000; 
      margin: 5px 0 0 5px; 
     } 

    100% { 
      border: 30px solid #000; 
      margin: 0 0 0 0; 
     } 
} 

Затем, как я уже говорил в комментариях, я бы не использовать border и margin, потому что вы получаете этот «скачкообразный» эффект на FF и IE (не на Chrome). Вы можете использовать box-shadow с значением inset. Преимущество использования этого заключается в том, что ящик не перемещается из его исходного положения (избегая этого «перемещения», которое вы получаете при изменении границы/поля).

Что-то вроде этого:

@keyframes Cortona { 
    0% { 
      box-shadow: inset 0px 0px 1px 30px #000; 
     } 

    50% { 
      box-shadow: inset 0px 0px 1px 25px #000; 
     } 

    100% { 
      box-shadow: inset 0px 0px 1px 30px #000; 
     } 
} 

Вы можете увидеть здесь работать: http://jsfiddle.net/gjvhsje6/2/

Обратите внимание, что CSS будет меняться незначительно, так как я добавил padding:30px; к #CortonaRing1.

---

Предыдущий пример заставляет кольцо расти внутрь; если вы хотите, чтобы расти наружу, удалите inset из правила:

@keyframes Cortona { 
    0% { 
      box-shadow: 0px 0px 1px 30px #000; 
     } 

    50% { 
      box-shadow: 0px 0px 1px 25px #000; 
     } 

    100% { 
      box-shadow: 0px 0px 1px 30px #000; 
     } 
} 

Смотреть демо работает здесь: http://jsfiddle.net/gjvhsje6/4/ (в данном случае, вместо того чтобы играть с padding, вы можете настроить margin)