小编teh*_*tor的帖子

我想移动具有多种颜色的渐变,但问题是动画不平滑,只是在每一步都改变了它的位置.

这是

<style>
.animated {
    width:300px;
    height:300px;
    border:1px solid black;
    animation:gra 5s infinite;
    animation-direction:reverse;
    -webkit-animation:gra 5s infinite;
    -webkit-animation-direction:reverse;

    animation-timing-function:linear;
    -webkit-animation-timing-function:linear;
}
@keyframes gra {
    0% {
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
        background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);
    }
    50% {
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57));
        background: -webkit-linear-gradient(-45deg, #ff670f …