CODEWITHSUNDEEP
htmlcss
Krii
Krii

Reputation: 907

Creating a Web Page background fade with CSS

I want to make a website that when you open it, the background fades into a different color.

Example:

/* Chrome, Safari, Opera */
@-webkit-keyframes {
    from {
        background: white;
    }

    to {
        background: #F7F2E0;
    }
}

/* Firefox */
@-moz-keyframes {
    from {
        background: white;
    }

    to {
        background: #F7F2E0;
    }
}

@keyframes {
    from {
        background: white;
    }

    to {
        background: #F7F2E0;
    }
}

But when I run the script, nothing happens.

Upvotes: 1

Views: 656

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241238

You need to add a name to the animation and then add the animation properties to the desired element(s).

Example Here

@keyframes background {
    from {
        background:white;
    }
    to {
        background:#000;
    }
}

In the animation shorthand below, the value forwards is added for the animation-fill-mode property in order to end the animation at the last color.

body {
    animation: background 4s forwards;
}

Vendor prefixes omitted for simplicity - see the example for the full CSS.

I'd suggest reading more about CSS animations at MDN.

Upvotes: 1

Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

You have to give a name to your keyframe and and then apply it to the body. See this example. For animations and browser support see here.

@keyframes fadeBackgroud{
    from {
        background:white;
    } to {
        background:#F7F2E0;
    }
}

body {
    animation:fadeBackgroud 5s infinite;
}

Upvotes: 0

Related Questions