CSS旋转预加载器在

Question

我正在尝试创建一个很好的动画预加载器，我从这里开始：

https://ihatetomatoes.net/demos/css3-preloader/

我已经向我指出一个问题，就是动画“摇摆”。 如果您查看该链接，您将能够看到摇晃。 我用来生成它的代码是：

@mixin rotate($deg) {
    -webkit-transform: rotate($deg + deg); /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate($deg + deg); /* IE 9 */
    transform: rotate($deg + deg); /* Firefox 16+, IE 10+, Opera */
}

#loader {
    @include make-loader;
    display: block;
    position: relative;
    left: 50%;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: $primary;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1002;

    &.static {
        opacity: 1 !important;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
        -webkit-transform: rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(45deg); /* IE 9 */
        transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera */
        &::before {
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
            -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg); /* IE 9 */
            transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
        }

        &::after {
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
            -webkit-transform: rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(45deg); /* IE 9 */
            transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera */
        }
    }

    &::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0);
        border-top-color: $secondary;
        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    &::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0);
        border-top-color: $tertiary;
        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }
}

@-webkit-keyframes spin {
    0% {
        @include rotate(0);
    }

    100% {
        @include rotate(360);
    }
}

@keyframes spin {
    0% {
        @include rotate(0);
    }

    100% {
        @include rotate(360);
    }
}

我的mixin可能无法帮助，因为它只是设置宽度和高度：

@import "../../global/variables";

@mixin make-loader ($multiplyer: 1) {
    width: $multiplyer * ($loader-width * .7);
    height: $multiplyer * ($loader-height * .7);
    margin: ($multiplyer * $loader-margin-top) ($multiplyer * $loader-margin-right) ($multiplyer * $loader-margin-bottom) ($multiplyer * ($loader-margin-left * .7));
    border-width: $multiplyer * $loader-item-border-width;

    @include extra-small-width {
        width: $multiplyer * $loader-width;
        height: $multiplyer * $loader-height;
        margin-left: ($multiplyer * $loader-margin-left);
    }

    &.static {
        margin: ($multiplyer * $loader-static-margin-top) ($multiplyer * $loader-static-margin-right) ($multiplyer * $loader-static-margin-bottom) ($multiplyer * $loader-static-margin-left);
    }

    &::before {
        top: $multiplyer * $loader-first-item-top;
        left: $multiplyer * $loader-first-item-left;
        right: $multiplyer * $loader-first-item-right;
        bottom: $multiplyer * $loader-first-item-bottom;
        border-width: $multiplyer * $loader-item-border-width;
    }

    &::after {
        top: $multiplyer * $loader-second-item-top;
        left: $multiplyer * $loader-second-item-left;
        right: $multiplyer * $loader-second-item-right;
        bottom: $multiplyer * $loader-second-item-bottom;
        border-width: $multiplyer * $loader-item-border-width;
    }
}

我在这里读到：Wobbly CSS Animation with Border-Radius in Internet Explorer可能是由于outline:1px solid transparent;。我没有使用outline，但我使用的是透明边框，因此我将它们更改为rgba(255, 255, 255, 0);，但问题仍然存在。

有谁知道为什么？