如何平滑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/

注意，隨着我添加padding:30px; 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 ）