CODEWITHSUNDEEP
htmlasp.netcsscss-animations
B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10267

What am I missing in my CSS animation?

I'm trying to get the title on my page to animate from white, through the rainbow, then back to white. Here's my code:

CSS:

@-webkit-keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

@-moz-keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

@-o-keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

@keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

.WhiteRainbowGlow {
    color: white;
    font-size: 2em;
    font-family: 'Segoe UI Light', Candara, Consolas, Calibri, sans-serif !important;
    text-shadow: 4px 3px 6px #000000;
    text-shadow: 4px 3px 6px rgba(0, 0, 0, .5);
    display: inline;
    padding-right: 10px;

    animation-name: rainbowGlow;
    animation-duration: 1s;
    animation-delay: 1s;
}

HTML:

<h1 class="WhiteRainbowGlow">My Next Winner</h1>

Am I forgetting something? Doing something wrong?

Upvotes: 0

Views: 128

Answers (2)

Diego
Diego

Reputation: 366

Add this to WhiteRainbowGlow

    -webkit-animation: rainbowGlow 5s 1 linear;
    -moz-animation: rainbowGlow 5s 1 linear;

jsfiddle example

Upvotes: 1

Milad Hosseinpanahi
Milad Hosseinpanahi

Reputation: 1495

.WhiteRainbowGlow {

...

    -moz-animation: rainbowGlow 1s;
    -o-animation: rainbowGlow  1s;
    -webkit-animation: rainbowGlow 1s;
    animation: rainbowGlow 1s;

}

Upvotes: 4

Related Questions