CSS3 Transitions Want to Add a Colour and Fade It Away

CSS3 transitions want to add a colour and fade it away

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.

The highlight is called on clicking the link. Here is the CSS (without vendor-prefixes):

@keyframes highlight {
    0% {
        background: red
    }
    100% {
        background: none;
    }
}

#highlight:target {
    animation: highlight 1s;
}

<div id="highlight"><a href="#highlight">Highlight</a></div>

Transition color fade on hover?

What do you want to fade? The background or color attribute?

Currently you're changing the background color, but telling it to transition the color property. You can use all to transition all properties.

.clicker { 
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    background: #f5f5f5; 
    padding: 20px;
}

.clicker:hover { 
    background: #eee;
}

Otherwise just use transition: background .2s ease-in.

CSS how to make an element fade in and then fade out?

Use css @keyframes

.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s linear;
}

@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

here is a DEMO

.elementToFadeInAndOut {    width:200px;    height: 200px;    background: red;    -webkit-animation: fadeinout 4s linear forwards;    animation: fadeinout 4s linear forwards;}
@-webkit-keyframes fadeinout {  0%,100% { opacity: 0; }  50% { opacity: 1; }}
@keyframes fadeinout {  0%,100% { opacity: 0; }  50% { opacity: 1; }}

<div class=elementToFadeInAndOut></div>

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>

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" />

Using CSS for a fade-in effect on page load

Method 1:

If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren't supported either, but this is exactly the kind of thing they were made for.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Demo

• http://jsfiddle.net/SO_AMK/VV2ek/

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation

Method 2:

Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:

jQuery

$("#test p").addClass("load");​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

Plain JavaScript (not in the demo)

document.getElementById("test").children[0].className += " load";

Demo

• http://jsfiddle.net/SO_AMK/a9dnW/

Browser Support

All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions

Method 3:

Or, you can use the method that .Mail uses:

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);​

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

Demo

• http://jsfiddle.net/SO_AMK/a9dnW/3/

Browser Support

jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-support/


jQuery 2.x: All modern browsers and Internet Explorer 9 (and later): http://jquery.com/browser-support/

This method is the most cross-compatible as the target browser does not need to support CSS 3 transitions or animations.

CSS: Different Elements Have The Same Transition, But Does Not Fade-in Or Fade-out The Same Way

It looks good in some browsers (i.a. Firefox). According to this, both background color and transparency transitions, in your case, should calculate to the same interpolated values.
So I think this is a bug. You can easily work around this by replacing opacity change with change in background color and text color: https://jsfiddle.net/hcphs3ey/.

.navTabDropdownItem{
   visibility: hidden;
   color:transparent;
   background-color: white;
}
.navDropdown:hover .navTabDropdownItem {
   visibility: visible;
   background-color: var(--Normal-Color);
   color:black;
}

Add fade-in/fade-out to background change

You can set a transition to the element by CSS like this:

button {
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

I recommend checking out this documentation

---

Related Topics