У меня есть анимация для падающих предметов внутри 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 ""
}