StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1>CSS Animation:</h1> <p>CSS Animation is <a href="http://caniuse.com/#feat=css-animation" rel="nofollow">currently supported</a> on all browsers except Opera Mini. It takes advantage of hardware acceleration and is preferred to JavaScript animations. In fact, jQuery animations try to use CSS3 animations and fall back to JS if the browser doesn't support it.</p> <p>You can literally take this code and drop it in. See the <a href="http://fiddle.jshell.net/ZH8GN/" rel="nofollow">FIDDLE here</a>.</p> <pre><code>body { animation: colorchange 50s; /* animation-name followed by duration in seconds*/ /* you could also use milliseconds (ms) or something like 2.5s */ -webkit-animation: colorchange 50s; /* Chrome and Safari */ } @keyframes colorchange { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 75% {background: green;} 100% {background: red;} } @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 75% {background: green;} 100% {background: red;} } </code></pre> <p>The site you referenced uses 10 second transitions, so I took the number of colors (5) and multiplied that by 10 seconds to arrive at an animation duration of 50s.</p> <p>Then you take the number of steps or colors (5) minus 1 (for the 0%), so now 4, and divide 100 by it, so 25. This gives you your step distance, so 5 steps from 0-100%: 0%, 25%, 50%, 75%, 100%.</p> <p>Since the request is pretty simple, I just used the color names. They are not specific and are open to browser/OS interpretation. If you want more specific colors, you can use <a href="http://www.standardista.com/hsla-color-picker/" rel="nofollow">this color generator</a> and replace the color names with one of these values.</p> <h2>Original Answer:</h2> <h1>CSS Transitions:</h1> <p>This site uses CSS transitions. There is a declaration of:</p> <pre><code>* { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } </code></pre> <p>Then you define some color classes like:</p> <pre><code>.green { background-color: rgba(0,255,0,1); } .red { background-color: rgba(255,0,0,1); } .blue { background-color: rgba(0,0,255,1); } </code></pre> <p>Then you set different classes on the body tag, and that will cause the transition like that, because of the transition CSS you defined initially</p> <p>EDIT: I misspoke, slightly. here is the ACTUAL transition on the body tag: </p> <pre><code>transition: all 10s ease-in-out; </code></pre> <p>Of course, the CSS colors on the body are being set with JS on a timer, but it's a trivial operation and the CSS does the bulk of the work, and you can do it more elegantly by simply setting classes than by setting the bg color directly with script.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload