CSS3 Button Background Color Infinite Transition

css3 button background color infinite transition

Hi i have made the button through CSS3 Animation please have look i hope its near to your question:-

HTML

<input type="submit" value="submit" class="button" />

CSS

.button {
    width:100px;
    height:20px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s infinite; /* Firefox */
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst /* Firefox */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

see the demo:- http://jsbin.com/osohak/7/edit

read more about CSS3 Transitions & Animation http://css3.bradshawenterprises.com/cfimg/

change background color once after few seconds

Using a CSS animation, you could just jump from 99.9% to 100%. Just set the initial background color (#E1FEE0) within 99.9%, then the final background color within 100%. If you want the color to transition, just increase the gap and use something like 80% for example.

Example Here

p {
    display: inline;
    animation: background-fade 10s forwards;
}

@keyframes background-fade {
    99.9% {
        background:#E1FEE0;
    }
    100% {
        background:#000;
    }
}

Other vendor prefixes omitted for simplicity and brevity.

css toggle switch - add transition for background-color between pseudo elements

FIXED DEMO

I add a little changes in code :
- I move the text to spans, and used the before element for the background of moving with transition.

you can see the fixed demo

label{
    position:relative;    
}

.switchbox input + label:before {
    transition:0.3s;
    content:""; display:block;
    width:50%;
    height:20px;
    position:absolute;
    left:0;
    top:0;
  background: #a5a5a5; /* W3C */    
}

.switchbox input:checked + label:before {
    left:50%; 
}

CSS for creating animated gradient button background

To get a gradient animation to repeat infinitely in one direction, the main thing you need to do is adjust the color stops in your gradient:

Repeat your gradient stops twice. (This makes the end of your gradient look like the start, allowing for a smooth transition between each repetition of your animation.)
Repeat your first gradient stop again at the end. (This makes the last stop blend in with the first.)

You'll also need to tweak your keyframes to get them going in the direction you want (see the code below).

.custom-btn {  background: linear-gradient(105deg,    /* Base gradient stops */    #f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3,    /* Repeat your base gradient stops */    #f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3,    /* Repeat your first gradient stop */    #f6d365);    background-size: 200% 200%;  animation: rainbow 5s linear infinite;  border: 0;  padding: 25px;  font-size: 40px;  color: #fff;}
@keyframes rainbow {    0% { background-position: 100% 100% }  100% { background-position: 0% 0% }}

<body style="text-align:center;">  <button class="custom-btn">My Button</button></body>

CSS transition: fade background color, resetting after

You could make use of animation keyframes. No additional javascript needed.

$('input[type=button]').click( function() { $('#newContent').addClass('backgroundAnimated');});

@-o-keyframes fadeIt {  0%   { background-color: #FFFFFF; }  50%  { background-color: #AD301B; }  100% { background-color: #FFFFFF; }}@keyframes fadeIt {  0%   { background-color: #FFFFFF; }  50%  { background-color: #AD301B; }  100% { background-color: #FFFFFF; }}
.backgroundAnimated{        background-image:none !important;          -o-animation: fadeIt 5s ease-in-out;             animation: fadeIt 5s ease-in-out; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>Old stuff</div><div>Old stuff</div><div>Old stuff</div><div id="newContent">New stuff, just added</div>
<input type="button" value="test" />

CSS3 animate color by steps

This seems to be sort of a "grey" area (pun intended) with respect to the steps() timing function for animations.

What seems to happen is that when you use steps(2, end), the animation is supposed to have two steps - one is from black background + white color to an intermediate state (where both are gray) and then another from the intermediate state to white background + black color (the end state) but the 2nd step happens right at the end of the animation and at almost the same time that the element is going to its original state to start the next loop. So, it kind of creates an impression that the white background + black color never happens.

The solution that seems to be working is to use steps(1, end) with the start and end states as black background + white color while the half way stage is white background + black color. I don't have any conclusive explanation on why this works but the point is that it does work.

This article at designmodo is the only one that I've found about this topic but I am still finding it difficult to explain the reason for this behavior. The one thing which we can be certain about after seeing this example is that if steps(n, start) is used, the car never comes to start position whereas if we use steps(n, end) it never reaches the end point. It is a 4 step animation but only three steps are visible, the other step happens right at the start or the end (depending on the parameter).

Solution:

.animated-play-btn {  background-color: white;  height: 50px;  width: 200px;  animation-timing-function: steps(1, end);  animation-duration: 1s;  animation-name: clipping_btn;  animation-iteration-count: infinite;  animation-fill-mode: forwards;}@keyframes clipping_btn {  0%, 100% {    background-color: #000;    color: white;  }  50% {    color: black;    background-color: #fff;  }}

<button class="animated-play-btn">  coucou</button>

Loop gradient effect on existing button

Consider the gradient on a pseudo element instead where you can easily keep the initial background color:

.button-loader {  width: 100px;  height: 100px;  border:1px solid;  background-size: 200% 100%;  transition: all 1.5s ease-out;  position:relative;  z-index:0;}.button-loader:before {  content:"";  position:absolute;  z-index:-1;  top:0;  right:0;  left:0;  bottom:0;  background: linear-gradient(to right,rgba(255, 255, 255, 0.0), rgba(245, 245, 245, 0.95) 40% 60%, rgba(255, 255, 255, 0.0));  background-size:600% 100%;  background-position:right;  transition:1s all;}
.button-loader:hover:before {  background-position:left;}

<div class="button-loader" style="background:blue;"></div><div class="button-loader" style="background:red;"></div>
<div class="button-loader" style="background:linear-gradient(red,purple);"></div>

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>

CSS3 Button Background Color Infinite Transition