animation - Firefox 和 IE 中的 css 关键帧动画

http://dev.viral-minds.com/miller/abc/abc.html

关于这个的两个问题

如何防止绿色 block 在页面加载开始时“闪烁”？
动画目前只能在 chrome 上运行...如何让它在 FF 和 IE 上运行？

谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>

    <style type="text/css">
        body 
        {
            background-color:#FFFFF0; /*ivory*/
            overflow: hidden;
        }

        #box
        {
            position: absolute;
            width:495px;
            height:263px;
            background:#32331d;
            top: 20px;
            left: 20px;
        }

        #nav
        {
            position: absolute;
            margin-left:30px;
            width:100%;
            height:100px;
            top: 425px;
            z-index: 100;
            background-image:url('colors.png');
            background-repeat:no-repeat;
        }


        #stars,
        #stars-2,
        #small-stars,
        #small-stars-2 {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 800px;
            height: 800px;
            margin: -300px 0 0 -300px;
            background: url(stars-large.png) no-repeat center center;
            -webkit-animation-name: starsLarge;
            -webkit-animation-duration: 240s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @-webkit-keyframes starsLarge {
            from {
                -webkit-transform: rotate(0deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }

        #stars-2 {
            -webkit-animation-name: starsLargeAlt;
            -webkit-animation-duration: 180s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @-webkit-keyframes starsLargeAlt {
            from {
                -webkit-transform: rotate(180deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }

        #small-stars,
        #small-stars-2 {
            background: url(stars-small.png) no-repeat center center;
            -webkit-animation-duration: 60s;
            -webkit-animation-name: starsSmall;
        }

        #small-stars-2 {
            -webkit-animation-name: starsSmallAlt;
            -webkit-animation-duration: 120s;
        }

        @-webkit-keyframes starsSmall {
            from {
                -webkit-transform: rotate(360deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(0deg) scale(.5);
                opacity: .5;
            }
        }

        @-webkit-keyframes starsSmallAlt {
            from {
                -webkit-transform: rotate(0deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }
    </style>
</head>
<body>
    <div id="box"><img src="actual.png"></img></div>
    <div id="nav"></div>
    <div id="stars"></div>
    <div id="stars-2"></div>
    <div id="small-stars"></div>
    <div id="small-stars-2"></div>
</body>

最佳答案

元素 1:绿色 block 闪烁，因为叠加图像尚未从服务器检索。您可以将 display: none; 添加到 #box 的 CSS，然后在页面完全加载后以编程方式显示它。例如:

// jQuery:
$(document).ready(function(){
  $('#box').show();
});

元素 2:动画仅适用于 Chrome，因为您使用的是 -webkit 特定样式定义。您将需要研究替代方案，例如 -moz 和 -ms 以查看它是否可以在这些浏览器中运行。您也可以尝试完全省略前缀。

关于animation - Firefox 和 IE 中的 css 关键帧动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10899686/

animation - Firefox 和 IE 中的 css 关键帧动画

上一篇：css - 棘手的 CSS 滚动长度

下一篇：html - 如何在一个页面中制作不同的部分(里面有解释)