Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS animations not working

CSS animations not working

Problem

I have a simple CSS Animation to fade in text:

#title{
    animation: text 2s;
    -webkit-animation: text 2s;
    -moz-animation: text 2s;
    -o-animation: text 2s;
    font-family: 'Lato300', sans-serif;
    height: 115px;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@keyframes text{
    0% {display: none;}
    100% {display: inline;}
}

@-moz-keyframes text{
    0% {display: none;}
    100% {display: inline;}
}

@-webkit-keyframes text{
    0% {display: none;}
    100% {display: inline;}
}

@-o-keyframes text{
        0% {display: none;}
    100% {display: inline;}
}

The HTML:

Text goes here

For some reason, the animation doesn't play. Does anyone know why? (I kept all the code incase something else is causing the problem)

Problem courtesy of: william44isme

Solution

You will not be able to animate display property. However you can transition an opacity

@-webkit-keyframes text {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

http://jsfiddle.net/5FCZA/

Solution courtesy of: dfsq

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS animations not working

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×