动画不能正常工作CSS3

我一直有CSS3的问题，在动漫作品中的Chrome，但在Firefox中不起作用。动画不能正常工作CSS3

的CSS代码：

.mwhaha { 
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index:98; 
    background-color:rgba(0, 0, 0, .6); 
    animation: fade-in 2s; 
    -moz-animation: fade-in 2s; 
    -webkit-animation: fade-in 2s; 
}

动画代码：

@keyframes fade-in 
{ 
    from { 
     opacity:0; 
     display:block; 
    } 
    from { 
     opacity:1; 
     display:block; 
    } 
} 
@-moz-keyframes fade-in 
{ 
    from { 
     opacity:0; 
     display:block; 
    } 
    to { 
     opacity:1; 
     display:block; 
    } 
} 
@-webkit-keyframes fade-in 
{ 
    from { 
     opacity:0; 
     display:block; 
    } 
    to { 
     opacity:1; 
     display:block; 
    } 
}

就像我说的，代码工作在Chrome，但在Firefox不起作用。我一直在尝试其他几种方法来使它像工作：

@-moz-keyframes fade-in 
{ 
    from { 
     background-color:rgba(0, 0, 0, .0); 
     display:block; 
    } 
    to { 
     background-color:rgba(0, 0, 0, .6); 
     display:block; 
    } 
}

但还是没有结果。

来源

2012-02-11 Kristjan

双用在关键帧？ – ChristopheCVB 2012-02-11 16:05:52

哎呀，将修复它，并尝试它是否工作。我的坏:) /编辑：还没工作 – Kristjan 2012-02-11 16:16:18

我复制你的代码到网页和动画效果的罚款。你的问题必须在其他地方。 – 2012-02-13 12:27:49

我已经把这个在小提琴和纠正小错误，其IMO没有造成问题。小提琴在Firefox 35.0/Mac OSX上的优胜美地正常工作。

http://jsfiddle.net/o3qqeL8k/

哪个FF您使用的版本是什么操作系统？

@keyframes fade-in { 
 
    from { 
 
     opacity:0; 
 
    } 
 
    to { 
 
     opacity:1; 
 
    } 
 
} 
 
@-moz-keyframes fade-in { 
 
    from { 
 
     opacity:0; 
 
    } 
 
    to { 
 
     opacity:1; 
 
    } 
 
} 
 
@-webkit-keyframes fade-in { 
 
    from { 
 
     opacity:0; 
 
    } 
 
    to { 
 
     opacity:1; 
 
    } 
 
} 
 
.mwhaha { 
 
    width:100%; 
 
    height:100%; 
 
    position:fixed; 
 
    z-index:98; 
 
    background-color:rgba(0, 0, 0, .6); 
 
    animation: fade-in 2s; 
 
    -moz-animation: fade-in 2s; 
 
    -webkit-animation: fade-in 2s; 
 
}

<div class="mwhaha"></div>

来源

2015-01-19 17:08:43 connexo

动画不能正常工作CSS3

回答

相关问题