当前位置 : 主页 > 网页制作 > css >

不透明属性的简单(?)CSS动画

来源:互联网 收集:自由互联 发布时间:2021-06-13
好的,我没有得到这个.我以前做过 CSS3动画,但出于某种原因,简单地设置不透明度的动画对我今天起作用.我错过了一些傻事吗? CSS: @-webkit-keyframes fadein { from: { opacity: 0; } to: { opacity: 1
好的,我没有得到这个.我以前做过 CSS3动画,但出于某种原因,简单地设置不透明度的动画对我今天起作用.我错过了一些傻事吗?

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

你之后和之后不需要冒号:

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

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

网友评论