Анимированный градиентный фон в CSS

Question

Я пытаюсь сделать этот эффект ниже, используя только CSS, чтобы подключиться к фону сайта WordPress, но не может показаться, что он это понял.

http://codepen.io/quasimondo/pen/lDdrF

body{ 
    background-color: #000000; 
    padding: 0px; 
    margin: 0px; 
} 

#gradient 
{ 
    width: 100%; 
    height: 800px; 
    padding: 0px; 
    margin: 0px; 
} 

Спасибо за ваше время!

Answer 1

Я сделал этот эффект один раз, но не с градиентом, просто сплошные цвета. Я предположил, что вы можете редактировать его с помощью background-image: linear-gradient (top, #topcolor, #bottomcolor) и времени перехода:

Сделал переход ключевых кадров и называет его объектом. В этом случае полный HTML-код:

@-webkit-keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
@-moz-keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
@-ms-keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
@-o-keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
@keyframes moveColor { 
    from { 
    background-color: #43536E; 
    } 
    10% { 
    background-color: #591553; 
    } 
    20% { 
    background-color: #00d5d6; 
    } 
    30% { 
    background-color: #8C0303; 
    } 
    40% { 
    background-color: #D6873A; 
    } 
    50% { 
    background-color: #3D4047; 
    } 
    60% { 
    background-color: #ffa73d; 
    } 
    70% { 
    background-color: #0089B3; 
    } 
    80% { 
    background-color: #9FB309; 
    } 
    90% { 
    background-color: #3a3a3a; 
    } 
    100% { 
    background-color: #5B4D41; 
    } 
    to { 
    background-color: #43536E; 
    } 
} 
html { 
    -webkit-animation: moveColor 50s ease infinite; 
    -khtml-animation: moveColor 50s ease infinite; 
    -moz-animation: moveColor 50s ease infinite; 
    -ms-animation: moveColor 50s ease infinite; 
    -o-animation: moveColor 50s ease infinite; 
    animation: moveColor 50s ease infinite; 
    -webkit-transition: 0.3s; 
    -khtml-transition: 0.3s; 
    -moz-transition: 0.3s; 
    -ms-transition: 0.3s; 
    -o-transition: 0.3s; 
    transition: 0.3s; 
} 

http://codepen.io/ycisne/pen/Gqalu

Я надеюсь, что это работает для вас.

Answer 2

Здесь я сделал это для вас.

body { 
    background: linear-gradient( 
    45deg, 
    violet, 
    red, 
    orange, 
    yellow, 
    green, 
    blue, 
    indigo, 
    violet 
); 

    background-size: 1000%; 

    animation: move_bg 500s linear 0s infinite; 
} 

@keyframes move_bg { 
    from {background-position: 0} 
    to {background-position: 1000%} 
} 

Demo