Fond dégradé animé en CSS

Question

J'essaie de faire cet effet ci-dessous en utilisant simplement CSS pour brancher dans un fond d'un site WordPress, mais ne peut pas sembler le comprendre.

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

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

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

Merci pour votre temps!

Answer 1

J'ai fait cet effet une fois, mais pas avec un dégradé, juste des couleurs unies. Je suppose que vous pouvez l'éditer avec l'image de fond: linear-gradient (top, #topcolor, #bottomcolor) et l'heure de transition:

Fait la transition des images clés et l'appelle dans l'objet. Dans ce cas, est plein le code 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

J'espère que cela fonctionne pour vous.

Answer 2

Ici, j'ai fait cela pour vous.

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