CSS gradient transition_in javascript

Question

Do you have an idea to "transfer" this CSS Code to Javascript (maybe jQuery)?

html { background-color: #B94FC1; } html:before, html:after { content: ""; height: 100%; width: 100%; position: fixed; z-index: -6; } html:before { background-image: linear-gradient(to bottom, #5856D6 0%, #C644FC 100%); animation: fgradient 5s linear 0s infinite alternate; } html:after { background-image: linear-gradient(to bottom, #C643FC 0%, #FF5F37 100%); animation: sgradient 5s linear 0s infinite alternate; } @keyframes fgradient { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes sgradient { 0% { opacity: 0; } 100% { opacity: 1; } } 

Fiddle.

I want a transition from a gradient to an other. My own code works well, but I want try the same with Javascript ;)

Hope somebody can help me.

Answer 1

using jquery:

html

<div class="gradient one"></div> <div class="gradient two"></div> 

css

html { background-color: #B94FC1; } body { margin:0; } .gradient { content: ""; height: 100%; width: 100%; position: fixed; z-index: -6; } .gradient.one { background-image: linear-gradient(to bottom, #5856D6 0%, #C644FC 100%);} .gradient.two { background-image: linear-gradient(to bottom, #C643FC 0%, #FF5F37 100%); display:none; } 

javascript

$(function() { fadeToggle( $('.gradient.one') ); fadeToggle( $('.gradient.two') ); }); function fadeToggle(el) { el.fadeToggle(5000,null,function() { fadeToggle(el); }); } 

fiddle: http://jsfiddle.net/aMVBk/2/