Change Background Color Every 30S (Fade Transition)

Change background color every 30s (fade transition)

Here's a jQuery approach, to complete Bogdan's answer, that takes 3 parameters: selector (example, ".container" or "div"), colors (an array of colors to switch in between) and time (controls how frequently the bgd color changes).
I set it for 3 seconds (3000) so you can see it in action easier, but you can increase it to 30000 (30 seconds).

jQuery(function ($) {    function changeColor(selector, colors, time) {        /* Params:         * selector: string,         * colors: array of color strings,         * every: integer (in mili-seconds)         */        var curCol = 0,            timer = setInterval(function () {                if (curCol === colors.length) curCol = 0;                $(selector).css("background-color", colors[curCol]);                curCol++;            }, time);    }    $(window).load(function () {        changeColor(".container", ["green", "yellow", "blue", "red"], 3000);    });});

.container {    background-color: red;    height:500px;    -webkit-transition: background-color 0.5s ease-in-out;    -moz-transition: background-color 0.5s ease-in-out;    -o-transition: background-color 0.5s ease-in-out;    -khtml-transition: background-color 0.5s ease-in-out;    transition: background-color 0.5s ease-in-out;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="container"></div>

How to fade multiple background colors after few seconds?

try like this: Demo

body{

animation: background-fade 10s infinite;    
}

@keyframes background-fade {
    0% {
        background:red;
    }
    50% {
        background:blue;
    }
    100% {
        background:green;
    }
}

You need to use infinite instead of forwards for looping

javascript css3 change background color every 2 seconds

A few changes A variation on this should work in modern browsers, if you know the colors and the number of colors in advance:

.animate-me {  -webkit-animation: bgcolorchange 4s infinite; /* Chrome, Safari, Opera */   animation: 4s infinite bgcolorchange;}@keyframes bgcolorchange {  0% {    background-color: red;  }  25% {    background-color: green;  }  50% {    background-color: yellow;  }  75% {    background-color: yellow;  }  100% {    background-color: red;  }}/* Chrome, Safari, Opera */ @-webkit-keyframes bgcolorchange {      0%   {background: red;}      25%  {background: yellow;}      75%  {background: green;}      100% {background: blue;} } 

<div class="animate-me">Trippy! Give me a headache!</div>

AngularJS Animate - Transition To Different Background Color Only Works One Way

You only need #availability-button.red and #availability-button.green. The animation life-cycle classes like red-add and red-remove are useful if you're using animations, but for transitions can be tricky since you're just transitioning the change in properties between selectors.

In this case, it seems like multiple selectors are matched in the red-* and green-* groups, which causes undefined behavior in how the transition is completed.

Updated Fiddle

Jquery: How To Add Fading Effect of Changing Color by Checkig Checkbox

Use the following CSS for a half-second transition effect on background color of body.

body {
    transition: background-color 0.5s;
}

I want to fade the whole background on focus

There are so many ways this can be done:

1) Use jQuery to add this class when the search field has focus:

.fader {
    opacity: .5;
    -webkit-transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
            transition: opacity .25s ease-in-out;
}

2) Use jQuery to apply this method when the search field has focus:

$("body").fadeOut(2500); // the higher the number the longer it takes to fade

Note for IE 8 compatibility: Use opacity: 0.5; filter: alpha(opacity=50);

Make a looping div background fade into different colors

The timings should remain the same. Here I've included the fading image without jQuery. Given the code, I don't think you really need help doing this, but to answer the question, for it to work for older browsers as well though, jQuery may be a better option.

Demo http://jsfiddle.net/dP8fL/1/ (time changed to 10s for less waiting to check it works)

<div class="fading">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl7V8rHy90EMd_IYWwbiucARcCPDHnwBkoB7T3ZJjDdqauT-j3eQ" />
</div>

CSS

.fading {
    height:200px;
    width:100%;
    background: black;
    animation: fading 30s infinite;
    -webkit-animation: fading 30s infinite;
    border-radius:5px;
}
.fading img{
    width:100px;
    animation: opacityfading 30s infinite;
    -webkit-animation: opacityfading 30s infinite;
    margin:30px;
}
@keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}

@-webkit-keyframes fading {
    0%   { background: black; }
    33%  { background: red; }
    66%  { background: blue; }
    100% { background: black; }
}
@keyframes opacityfading {
    0%   { opacity: 0; }
    33%  { opacity: 1; }
    66%  { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes opacityfading {
    0%   { opacity: 0; }
    33%  { opacity: 1; }
    66%  { opacity: 0; }
    100% { opacity: 1; }
}

Javascript background color transition and reset on HTTP response

The issue is because on each successive request you toggle the background colour instead of setting it to a state which reflects the status of the last request.

To fix this you could instead set the error class on the element, then use a timeout to remove that class after an arbitrary time, 10 seconds for example:

function error_callback() {
  var $div = $('.div').addClass('error');
  setTimeout(function() {
    $div.removeClass('error');
  }, 10000);
}

Note that, as @Taplar mentioned in the comment below, you would also need to remember to remove the error class when a second successful request is made shortly after an initial failure.

Background image to background colour transition/animation

You cant animate/transition a background image into a color, but you can fake the effect by applying the image to a psuedo element overlayed on your div, and animating its opacity out on hover. The benefit being it will animate both in and out.

Demo Fiddle

You can do this with the following CSS:

.div1 {    
    height:200px;
    width:600px;
    position:relative;
    background:red;
}
.div1:after{
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
    background-size:cover;
    opacity:1;
    transition: 3s;
}

.div1:hover:after {
    opacity:0;    
}

---

Related Topics