Анимация не работает в IE, но она работает в четырех браузерах (chrome, MOZ, O и Safari)

ProgramBox

Анимация не работает в IE, но она работает в четырех браузерах (chrome, MOZ, O и Safari)

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Мне нужна помощь в css, я создаю анимацию метеоритного дождя, и я получил этот код из другого браузера через исследование. Метеоритный дождь не отображается в IE, но он отлично работает в моем четырех браузерах. Я пытался поставить -ms-animation, (-ms-) для IE, но это не поможет. Помогите мне проанализировать мой код.

 .asteroid{
   position:absolute;
   top:-200px;
   left:-200px;
   width:200px;
   height:100px;
   opacity:0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   -webkit-animation: asteroidAnimation 6s infinite;
   animation: asteroidAnimation 6s infinite;
  -ms-animation: asteroidAnimation 6s infinite;
   -webkit-animation-timing-function:ease-in;
   -moz-animation-timing-function:ease-in;
   -ms-animation-timing-function:ease-in;
   -o-animation-timing-function:ease-in;
   animation-timing-function:ease-in;

   -webkit-animation-delay:2s;
   -moz-animation-delay:2s;
   -ms-animation-delay:2s;
   -o-animation-delay:2s;
   animation-delay:2s;
}
.asteroid-head{
   width:20px;
   height:10px;
   -webkit-border-radius:70%;
   -moz-border-radius:70%;
   border-radius:70%;
   background:#fff;
   -webkit-box-shadow:0px 0px 10px 2px #c91515;
   -moz-box-shadow:0px 0px 10px 2px #c91515;
   box-shadow:0px 0px 10px 2px #c91515;
   position: absolute;
   bottom:0;
   right:-5px;
    -webkit-transform:rotate(48deg);
   -moz-transform:rotate(48deg);
   -o-transform:rotate(48deg);
   -ms-transform:rotate(48deg);
   transform:rotate(48deg);
}
.asteroid-tail{
   width:0;
   height:0;
   border-left: 3px solid transparent;
   border-bottom: 200px solid #fff;
   border-right: 3px solid transparent;
   position: absolute;
   bottom:-22px;
   right:75px;
   -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
   -ms-transform:rotate(-45deg);
   transform:rotate(-45deg);
}


.a2{
   top:-205px;
   left:400px;
      -webkit-animation: asteroidAnimationTwo 8s infinite;
       animation: asteroidAnimationTwo 8s infinite;
           -ms-animation: asteroidAnimationTwo 8s infinite;

   -webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
-ms-animation-timing-function:ease-in;
-o-animation-timing-function:ease-in;
animation-timing-function:ease-in;

-webkit-animation-delay:4s;
-moz-animation-delay:4s;
-ms-animation-delay:4s;
-o-animation-delay:4s;
animation-delay:4s;

}
.a3{
   top:-205px;
  left:-200px;
      -webkit-animation: asteroidAnimationThree 6s infinite;
      animation: asteroidAnimationThree 6s infinite;
     -ms-animation: asteroidAnimationTwo 8s infinite;

   -webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
-ms-animation-timing-function:ease-in;
-o-animation-timing-function:ease-in;
animation-timing-function:ease-in;

-webkit-animation-delay:6s;
-moz-animation-delay:6s;
-ms-animation-delay:6s;
-o-animation-delay:6s;
animation-delay:6s;

}

.a4{
   top:-205px;
   left:-200px;
      -webkit-animation: asteroidAnimationFour 8s infinite;
       animation: asteroidAnimationFour 8s infinite;
     -ms-animation: asteroidAnimationFour 8s infinite;
   -webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
-ms-animation-timing-function:ease-in;
-o-animation-timing-function:ease-in;
animation-timing-function:ease-in;

-webkit-animation-delay:8s;
-moz-animation-delay:8s;
-ms-animation-delay:8s;
-o-animation-delay:8s;
animation-delay:8s;

}



/*--------------------------------------------------*/
@keyframes "asteroidAnimation" {
 0% {
    top: -200px;
      left: -200px;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.8;
 }
 10% {
    top: 200px;
      left: 200px;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
 }

}

@-moz-keyframes asteroidAnimation {
 0% {
   top: -200px;
   left: -200px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 200px;
   left: 200px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "asteroidAnimation" {
 0% {
   top: -200px;
   left: -200px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 200px;
   left: 200px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}



@-o-keyframes "asteroidAnimation" {
 0% {
   top: -200px;
   left: -200px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 200px;
   left: 200px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}


/*-----------------------------------------------------------------------*/
@keyframes "asteroidAnimationTwo" {
 0% {
    top: -200px;
      left: 400px;
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.8;
 }
 10% {
    top: 400px;
      left: 980px;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
 }

}

@-moz-keyframes asteroidAnimationTwo {
 0% {
   top: -200px;
   left: 400px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 400px;
   left: 980px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "asteroidAnimationTwo" {
 0% {
   top: -200px;
   left: 400px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 400px;
   left: 980px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}



@-o-keyframes "asteroidAnimationTwo" {
 0% {
   top: -200px;
   left: 400px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 400px;
   left: 980px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

/*-----------------------------------------------------------------------*/
@keyframes "asteroidAnimationThree" {
 0% {
    top: -200px;
      left: 300px;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.8;
 }
 10% {
    top: 300px;
      left: 880px;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
 }

}

@-moz-keyframes asteroidAnimationThree {
 0% {
   top: -200px;
   left: 300px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 300px;
   left: 880px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "asteroidAnimationThree" {
 0% {
   top: -200px;
   left: 300px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 300px;
   left: 880px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}



@-o-keyframes "asteroidAnimationThree" {
 0% {
   top: -200px;
   left: 300px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 300px;
   left: 880px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

/*-----------------------------------------------------------------------*/
@keyframes "asteroidAnimationFour" {
 0% {
    top: -200px;
      left: 500px;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.8;
 }
 10% {
    top: 500px;
      left: 1080px;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
 }

}

@-moz-keyframes asteroidAnimationFour {
 0% {
   top: -200px;
   left: 500px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 500px;
   left: 1080px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "asteroidAnimationFour" {
 0% {
   top: -200px;
   left: 500px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 500px;
   left: 1080px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}



@-o-keyframes "asteroidAnimationFour" {
 0% {
   top: -200px;
   left: 500px;
   filter: alpha(opacity=80);
   opacity: 0.8;
 }
 10% {
   top: 500px;
   left: 1080px;
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

/*-----------------------------------------------------------------------*/

<div class="asteroid">
        <div class="asteroid-head"></div>
        <div class="asteroid-tail"></div>
    </div>

<div class="asteroid a2">
        <div class="asteroid-head"></div>
        <div class="asteroid-tail"></div>
    </div>

1. «код из другого браузера через исследование» — пожалуйста, поделитесь источником. О какой версии IE вы говорите? Совместимость с браузером Google? -> «совместимость с браузером анимация css»

2. через codepen от anon. Я использую ie 11 broswer и css / css3 для html-кода. Я думаю, что это должно работать в любом браузере.

3. Если вы посмотрите на caniuse.com/css-animation , вы видите, что анимация поддерживалась только частично в IE до версии 9.0. В IE10 и выше это не должно быть проблемой. (как вы обнаружили, тем временем …) — И спасибо за codepen!

Ответ №1:

Я не могу комментировать, поэтому я пишу это в ответе. В моем проекте мне пришлось указать MIME для IE, чтобы позволить CSS работать. И я читал, что это «система безопасности», требуемая IE. Попробуйте это решение, я думаю, оно сработает.

 String typeMIME(String file) {
  int n = file.lastIndexOf('.');
  if (n >= 0) {
    String extension = file.substring(n);
    String returnMIME = "";
    switch (extension) {
      case '.html':
        returnMIME = 'text/html';
        break;
      case '.js':
        returnMIME = 'application/x-javascript';
        break;
      case '.css':
        returnMIME = 'text/css';
        break;
      case '.dart':
        returnMIME = 'application/dart';
        break;
      case '.ico':
        returnMIME = 'image/x-icon';
        break;
      case '.png':
        returnMIME = 'image/png';
        break;
      case '.gif':
        returnMIME = 'image/gif';
        break;
    }
    return returnMIME;
  }
  return 'text/plain';
}

Вам нужна конкретная часть:

 case '.css':
  returnMIME = 'text/css';
  break;

Но эта функция I di записывается в код на стороне сервера, чтобы принять запрос веб-страницы.
Я надеюсь, что это поможет.

1. Спасибо за вашу помощь.. Я просто опустил двойное «» на ключевых кадрах, и это работает. Но я также попробую ваш код. 🙂 Большое спасибо.

2. Ну, мой код предназначен для серверной части, поэтому он может не помочь. 🙂

Метки: Анимация не работает в IE но она работает в четырех браузерах (chrome MOZ O и Safari)