Animation firefox和IE中的css关键帧动画_Animation_Css

Animation firefox和IE中的css关键帧动画

animation css

Animation firefox和IE中的css关键帧动画,animation,css,Animation,Css,关于这一点有两个问题当页面加载时，如何防止绿色块在开始时“闪烁” 动画目前只在chrome上工作…如何让它在FF和IE中工作谢谢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>main</title> <style type="text/css"> body

关于这一点有两个问题

当页面加载时，如何防止绿色块在开始时“闪烁”

动画目前只在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>


主要的
身体
{
背景色：#fffff 0；/*象牙色*/
溢出：隐藏；
}
#盒子
{
位置：绝对位置；
宽度：495px；
高度：263px；
背景：32331d；
顶部：20px；
左：20px；
}
#导航
{
位置：绝对位置；
左边距：30px；
宽度：100%；
高度：100px；
顶部：425px；
z指数：100；
背景图片：url（'colors.png'）；
背景重复：无重复；
}
#明星们，
#stars-2，
#小星星，
#小星星2{
位置：绝对位置；
最高：50%；
左：50%；
宽度：800px；
高度：800px；
余量：-300px 0-300px；
背景：url（stars large.png）无重复中心；
-webkit动画名称：starsLarge；
-webkit动画持续时间：240秒；
-webkit动画迭代计数：无限；
-webkit动画计时功能：线性；
}
@-webkit关键帧StarsRarge{
从{
-webkit变换：旋转（0度）比例（3）；
不透明度：.9；
}
到{
-webkit变换：旋转（360度）比例（.5）；
不透明度：.5；
}
}
#stars-2{
-webkit动画名称：starsLargeAlt；
-webkit动画持续时间：180秒；
-webkit动画迭代计数：无限；
-webkit动画计时功能：线性；
}
@-webkit关键帧StarsRargeAlt{
从{
-webkit变换：旋转（180度）比例（3）；
不透明度：.9；
}
到{
-webkit变换：旋转（360度）比例（.5）；
不透明度：.5；
}
}
#小星星，
#小星星2{
背景：url（stars small.png）无重复中心；
-webkit动画持续时间：60秒；
-webkit动画名称：starsSmall；
}
#小星星2{
-webkit动画名称：starsSmallAlt；
-webkit动画持续时间：120秒；
}
@-webkit关键帧starsSmall{
从{
-webkit变换：旋转（360度）比例（3）；
不透明度：.9；
}
到{
-webkit变换：旋转（0度）比例（.5）；
不透明度：.5；
}
}
@-webkit关键帧starsSmallAlt{
从{
-webkit变换：旋转（0度）比例（3）；
不透明度：.9；
}
到{
-webkit变换：旋转（360度）比例（.5）；
不透明度：.5；
}
}

第1项：绿色块闪烁，因为尚未从服务器检索到覆盖的图像。您可以添加

显示：无

到CSS的

#框

，然后在页面完全加载后以编程方式显示它。例如：

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

第2项：动画仅在Chrome中工作，因为您使用的是

-webkit

特定的样式定义。您需要研究其他选项，例如

-moz

和

-ms

，以查看它是否可以在这些浏览器中工作。您也可以尝试完全省略前缀。

第1项：绿色块闪烁，因为尚未从服务器检索覆盖的图像。您可以添加

显示：无

到CSS的

#框

，然后在页面完全加载后以编程方式显示它。例如：

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

第2项：动画仅在Chrome中工作，因为您使用的是

-webkit

特定的样式定义。您需要研究其他选项，例如

-moz

和

-ms

，以查看它是否可以在这些浏览器中工作。您也可以尝试完全省略前缀。

I.您可以更改该div的背景颜色以匹配页面背景。稍后，加载图像后，通过jQuery将其更改为深绿色：

$(function() {
    $('#box img').load(function() {
        $(this).parent().css('background-color', '#32331D');
    });
});

二,。您必须添加特定于浏览器的前缀，而不是

-webkit

对于FF-
```
-moz
```
对于IE-
```
-ms
```
对于Opera-
```
-o
```

请记住，尽管有前缀，这些动画在旧版本的IE（8及以下）中是不起作用的。这些吸盘不支持CSS动画。

I.您可以更改该div的背景颜色以匹配页面背景。稍后，加载图像后，通过jQuery将其更改为深绿色：

$(function() {
    $('#box img').load(function() {
        $(this).parent().css('background-color', '#32331D');
    });
});

二,。您必须添加特定于浏览器的前缀，而不是

-webkit

对于FF-
```
-moz
```
对于IE-
```
-ms
```
对于Opera-
```
-o
```

请记住，尽管有前缀，这些动画在旧版本的IE（8及以下）中是不起作用的。那些笨蛋不支持CSS动画。

是的。您需要用moz、0和nothing替换webkit来重复整个块。IE10不使用前缀。其他IE不支持它。是的。您需要用moz、0和nothing替换webkit来重复整个块。IE10不使用前缀。其他IE不支持它。