不透明度屬性的簡單（？）CSS動畫

好吧，我不明白這一點。我之前已經完成了CSS3動畫，但由於某種原因，簡單地將不透明度設置爲今天不適用於我。我錯過了一些愚蠢的東西嗎？不透明度屬性的簡單（？）CSS動畫

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>

我還張貼作爲一個小提琴： http://jsfiddle.net/NRutman/Lcyvy/

任何幫助，將不勝感激。

感謝， -Nate

來源

2013-01-21 Nathan Rutman

閱讀本https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions?redirectlocale=en-US&redirectslug=CSS%2FUsing_CSS_transitions – Guy

你不from和to後需要冒號：

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

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

來源

2013-01-21 21:46:46 Pavlo

唉......我知道這將會是那樣的小事。非常感謝你。 –

變化

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

到

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

DEMO

來源

2013-01-21 21:32:25

不透明度屬性的簡單（？）CSS動畫

回答

相關問題