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因为你得到了＃34;跳跃＆＃34;对FF和IE的影响（不在Chrome上）。您可以将box-shadow与inset值一起使用。使用它的好处是盒子不会从原来的位置移动（避免在更改边框/边距时得到的＃34;重新定位）。

这样的事情：

@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;添加到#CortonaRing1时，CSS会略有变化。

前面的例子使戒指向内生长;如果您希望它向外扩展，请从规则中删除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。

如何平滑我的CSS3动画？

1 个答案: