Html CSS动画未在基于Webkit的浏览器中运行_Html_Css_Webkit_Css Animations

Html CSS动画未在基于Webkit的浏览器中运行

html css

Html CSS动画未在基于Webkit的浏览器中运行,html,css,webkit,css-animations,Html,Css,Webkit,Css Animations,我想切换一个图像与另一个，反之亦然，不断与一些时间延迟。这在诸如Chrome和Safari之类的Webkit浏览器中不起作用以下是我正在做的： .bkgd\u img{ 位置：绝对位置；排名：0；左：0；宽度：100%；身高：100%； z指数：-1； } .顶{ 动画名称：切换；动画计时功能：轻松进出；动画迭代次数：无限；动画持续时间：5s；动画方向：交替； } @关键帧切换{ 0% { 不透明度：1； } 45% { 不透明度：1； } 55% { 不透明度：0； } 1

我想切换一个图像与另一个，反之亦然，不断与一些时间延迟。这在诸如Chrome和Safari之类的Webkit浏览器中不起作用

以下是我正在做的：

.bkgd\u img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
}
.顶{
动画名称：切换；
动画计时功能：轻松进出；
动画迭代次数：无限；
动画持续时间：5s；
动画方向：交替；
}
@关键帧切换{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}

如果您想以一种简单的方式使用JQuery。还有其他方法，例如：

toggle（）

HTML:

}))

注意：我没有尝试过，但它可能会起作用。

如果您想用一种简单的方式使用JQuery。还有其他方法，例如：

toggle（）

HTML:

}))

注意：我没有尝试过，但它可能会工作。

在Firefox32、IE10和Chrome36中测试了您的代码。它似乎可以与IE和Mozilla配合使用。但与chrome不兼容。Chrome有不同的CSS符号，它无法读取它们，请使用以下Chrome代码。您可以为其他浏览器保留以前的代码

    .top {
        -webkit-animation-name:toggle;
        animation-name: toggle;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 5s;
        -webkit-animation-direction: alternate;
    }

    @-webkit-keyframes toggle {
        0% {
            opacity:1;
        }
        45% {
            opacity:1;
        }
        55% {
            opacity:0;
        }
        100% {
            opacity:0;
}
}

在Firefox32、IE10和Chrome36中测试您的代码。它似乎可以与IE和Mozilla配合使用。但与chrome不兼容。Chrome有不同的CSS符号，它无法读取它们，请使用以下Chrome代码。您可以为其他浏览器保留以前的代码

    .top {
        -webkit-animation-name:toggle;
        animation-name: toggle;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 5s;
        -webkit-animation-direction: alternate;
    }

    @-webkit-keyframes toggle {
        0% {
            opacity:1;
        }
        45% {
            opacity:1;
        }
        55% {
            opacity:0;
        }
        100% {
            opacity:0;
}
}

您缺少特定于供应商的css属性

-webkit-animation: toggle 5s infinite; 

@-webkit-keyframes toggle {}

请参阅工作代码。

您错过了特定于供应商的css属性

-webkit-animation: toggle 5s infinite; 

@-webkit-keyframes toggle {}

请参阅工作代码。

您必须使用特定于供应商的代码，您可以在下面的代码中进行检查

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        .bkgd_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;

}
.top {
    -webkit-animation: 5s 'toggle' infinite alternate;
    -moz-animation: 5s 'toggle' infinite alternate;
    -o-animation: 5s 'toggle' infinite alternate;
    animation: 5s 'toggle' infinite alternate;
}
@keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-webkit-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-moz-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-o-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

    </style>
</head>
<body>
    <img class="bottom bkgd_img" src="xyz.jpg" />
    <img class="top bkgd_img" src="abc.jpg" />
</body>
</html>


文件
.bkgd_img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
}
.顶{
-webkit动画：5s“切换”无限交替；
-moz动画：5s“切换”无限交替；
-o-动画：5s“切换”无限交替；
动画：5s“切换”无限交替；
}
@关键帧“切换”{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}@-webkit关键帧“切换”{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}@-moz关键帧“切换”{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}@-o关键帧“切换”{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}

您必须使用特定于供应商的代码，您可以在下面的代码中进行检查

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        .bkgd_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;

}
.top {
    -webkit-animation: 5s 'toggle' infinite alternate;
    -moz-animation: 5s 'toggle' infinite alternate;
    -o-animation: 5s 'toggle' infinite alternate;
    animation: 5s 'toggle' infinite alternate;
}
@keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-webkit-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-moz-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-o-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

    </style>
</head>
<body>
    <img class="bottom bkgd_img" src="xyz.jpg" />
    <img class="top bkgd_img" src="abc.jpg" />
</body>
</html>


文件
.bkgd_img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
}
.顶{
-webkit动画：5s“切换”无限交替；
-moz动画：5s“切换”无限交替；
-o-动画：5s“切换”无限交替；
动画：5s“切换”无限交替；
}
@关键帧“切换”{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}@-webkit关键帧“切换”{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}@-moz关键帧“切换”{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}@-o关键帧“切换”{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}

在基于Webkit的浏览器中，CSS3动画是否需要使用浏览器前缀？是的，当前仍然需要

-webkit-

前缀。看看-目前Chrome、Safari和Opera需要

-webkit-

前缀才能支持关键帧动画

未来读者的注意事项-随着浏览器供应商调整本机动画属性，这一点将在未来发生变化。确保webkit前缀下也使用了无前缀动画属性

完整示例 注意：非前缀属性应放在

-webkit-

前缀下面。这确保了支持浏览器将使用本机CSS属性

-webkit-animation: toggle 5s infinite; 

@-webkit-keyframes toggle {}

动画属性已压缩为一个：

animation:toggle 5s ease in out infinite alternate

.bkgd\u img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
}
.顶{
-webkit动画：切换5s轻松输入输出无限交替；
动画：切换5s轻松进出无限交替；
}
@-webkit关键帧切换{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}
@关键帧切换{
0% {
不透明度：1；
}
45% {
不透明度：1；
}
55% {
不透明度：0；
}
100% {
不透明度：0；
}
}

在基于Webkit的浏览器中，CSS3动画是否需要使用浏览器前缀？是的，当前仍然需要

-webkit-

前缀。看看-目前Chrome、Safari和Opera需要

-webkit-

前缀才能支持关键帧动画

未来读者的注意事项-随着浏览器供应商调整本机动画属性，这一点将在未来发生变化。确保webkit前缀下也使用了无前缀动画属性

完整示例 <