【发布时间】：2018-09-21 14:08:43
【问题描述】：
我有一个用于在 div 内掉落物体的动画。我在所有浏览器中对其进行了测试，它可以正常工作，但在 IE 上它根本没有动画。我请求你的帮助，谢谢！
它适用于桌面尺寸和移动设备，它适用于 Google Chrome、Mozilla、Edge、Safarri、Opera，IE 除外
这是我的 SCSS 代码：
.falling__Object span {
display: inline-block;
z-index: 10000;
-webkit-animation: falling__Object 10s infinite linear;
-moz-animation: falling__Object 10s infinite linear;
&.leaves {
width: 5vw;
background: url(../img/section-countdown/leaf.png);
background-repeat: no-repeat;
background-size: 75%;
/* margin: -280px 84px 54px -34px;
@media screen and (min-width: 320px) and (max-width:500px) {
width: 5vwvw;
}*/
}
&.snow {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/snow.gif");
background-size: 70%;
background-repeat: no-repeat;
}
&.green-leaf {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/green-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
&.spring {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/spring-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
}
.falling__Object span:nth-child(1n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
}
.falling__Object span:nth-child(3n+2) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
.falling__Object span:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
}
.falling__Object span:nth-child(3n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
}
.falling__Object span:nth-child(7n+2) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
}
.falling__Object span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
}
.falling__Object span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
}
@-webkit-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
@-moz-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
这是脚本：
function getSeason() {
var currentMonth = new Date().getMonth() + 1;
if (currentMonth === 12 || currentMonth === 1 || currentMonth === 2) {
$(".falling__Object span").addClass("snow");
} else if (currentMonth >= 3 && currentMonth <= 5) {
$(".falling__Object span").addClass("spring");
} else if (currentMonth >= 6 && currentMonth <= 8) {
$(".falling__Object span").addClass("green-leaf");
} else if (currentMonth >= 9 && currentMonth <= 11) {
$(".falling__Object span").addClass("leaves");
}
return ""
}
【问题讨论】：
-
web开发者老问题，ie是什么版本的？
-
Internet Explorer 11
-
如果您只添加
-webkit和-moz供应商前缀属性，您有什么期望？ -
@connexo 对不起，我忘记了动画：; ，请不要生气什么的，我不是机器人，我只是网络开发的初学者
标签： javascript jquery html sass