css-transitions

I would like someone to tell me what's the code for making a webpage background color (the background color of the whole page) to change (fade transition) every 30s to a given color variety. Is it simple? I guess css will make it easier? I've searched over the internet and I only found gradients which is not what I want. Thank you in advance. I 've search codepen and jsfiffle for examples but no one had something that simple :/ Example: While browsing my page I want the background color to change from blue to green and then to orange and again blue and so on so on... :) Here's a jQuery

Consider the following fiddle p { -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: transform 1s ease-in; -moz-transition: transform 1s ease-in; -o-transition: transform 1s ease-in; transition: transform 1s ease-in; } a:hover + p { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } The transition works smoothly in FF but there is no

As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty much there, and am using CSS3 transitions to animate its state change. When I have the element itself on a page with nothing else, the transition is relatively smooth on iOS. However, when I combine it with other CSS elements on a page, the result in iOS is laggy as anything. It's slightly better than a raw jQuery animation, but not much. I've set up two test pages to demonstrate what I mean (the difference is hardly

I want to make a DIV background (which doesn't have a background color) flash red then ease out to blank again. now I have used JS to add a new CLASS (which adds the red) to the DIV in question and CSS3 to add an easing to the background color. but it eases it IN, what I want is it to go RED then ease out. I guess I could do this by using JS to add multiple CLasss after a delay. but can CSS3 be used to do this entirely? If you want something like a highlighting you may want to use CSS3 animations. They are not supported in older browsers. Check caniuse for this. I've created a short example

Earlier today I asked Overlay a background-image with an rgba background-color . My goal is to have a div with a background-image, and when someone hovers the div, the background-image gets overlayed with an rgba color. In the answer , a solution with :after was given: #the-div { background-image: url('some-url'); } #the-div:hover:after { content: ' '; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.5); } I now would like to have the same, but with a CSS transition: I'd like the background color to fade in. I tried adding transition: all 1s; to the #the

Im trying to create spinners for Twitter Bootstrap buttons. Spinners should indicate some work in progress (ie. ajax request). Here is small example: http://jsfiddle.net/AndrewDryga/zcX4h/1/ HTML (full on jsfiddle): Unknown element (no animation here!): <p> <button class="btn-success has-spinner"> <span class="spinner"><i class="icon-spin icon-refresh"></i></span> Foo </button> </p> Works when width is defined: <p> <a class="btn btn-success has-spinner"> <span class="spinner"><i class="icon-spin icon-refresh"></i></span> Foo </a> </p> CSS: .spinner { display: inline-block; opacity: 0; width: 0

I have a form that functions as a settings page. When form elements are modified, they are marked as unsaved and have a different border color. When the form is saved, they are marked as saved by having another border color. What I want is that when the form is saved, the border will gradually fade out. The order will go: <input type='text' class='unsaved' /> Not saved yet, border is yellow <input type='text' class='saved' /> Saved, so the border is green <input type='text' class='' /> Fade out if coming from class saved If I can get a CSS3 transition to fire when the class saved is removed,