css - 无限滑动CSS3渐变

我有一个简单的动画，它对角地来回跳动，我希望它不断滑动而不是来回跳动。这是我的代码：

body {margin: 0; padding: 0;}

.error-con {
    background: rgba(255, 0, 89, 1);
    background: -moz-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255, 0, 89, 1)), color-stop(100%, rgba(0, 179, 255, 1)));
    background: -webkit-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
    background: -o-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
    background: -ms-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
    background: linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 100%);
    background-size: 400% 400%;
    -webkit-animation: errorBg 55s ease infinite;
    -moz-animation: errorBg 55s ease infinite;
    animation: errorBg 55s ease infinite;
    height: 100vh;
}

@-webkit-keyframes errorBg {
    0% {
        background-position: 93% 0%
    }
    50% {
        background-position: 0% 100%
    }
    100% {
        background-position: 93% 0%
    }
}

@-moz-keyframes errorBg {
    0% {
        background-position: 93% 0%
    }
    50% {
        background-position: 0% 100%
    }
    100% {
        background-position: 93% 0%
    }
}

@keyframes errorBg {
    0% {
        background-position: 93% 0%
    }
    50% {
        background-position: 0% 100%
    }
    100% {
        background-position: 93% 0%
    }
}

<div class="error-con"></div>

我尝试删除50％的关键帧，但这只是使整个操作跳回到最后一个关键帧的开头。有任何想法吗？

最佳答案

问题是您的渐变。对于无限循环，您应该具有四种颜色：

我已经在This Fiddle中修复了您的代码

background: -webkit-linear-gradient(45deg, rgba(255, 0, 89, 1) 0%, rgba(0, 179, 255, 1) 33%, rgba(255, 0, 89, 1) 66%, rgba(0, 179, 255, 1) 100%);

关于css - 无限滑动CSS3渐变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31302983/