Simple (?) CSS Animation de la Propriété d'Opacité

Ok, je n'ai pas cette. J'ai fait des animations CSS3 avant, mais pour une raison simplement de l'animation de l'opacité n'est pas de travail pour moi aujourd'hui. Ai-je raté quelque chose de stupide?

CSS:

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

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

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

#foo {
    background-color: green;
    color: white;
    -webkit-animation: fadein 2s ease-in alternate infinite;
    -moz-animation: fadein 2s ease-in alternate infinite;
    animation: fadein 2s ease-in alternate infinite;
}

HTML:

<div id="foo">This is Foo!</div>

J'ai aussi posté il comme un charme:
http://jsfiddle.net/NRutman/Lcyvy/

Toute aide serait appréciée.

Grâce,
-Nate

lire ce developer.mozilla.org/en-US/docs/CSS/Tutorials/...

OriginalL'auteur Nathan Rutman | 2013-01-21

  1. 9

    Vous n'avez pas besoin de virgule après from et to:

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

    http://jsfiddle.net/Lcyvy/6/

    Pouah...je savais que ça allait être quelque chose de petit comme ça. Je vous remercie beaucoup.

    OriginalL'auteur Pavlo

  2. 4

    Changement

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

    à

    @keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

    DÉMO

    OriginalL'auteur Zoltan Toth