CSS-анимация не работает в Internet Explorer

У меня есть веб-страница HTML/CSS. Эти страницы постоянно меняют изображения. Он работает в Chrome, но не в Internet Explorer - фоновое изображение остается неизменным. Я хотел бы отметить, что он не будет отображаться для вас должным образом, потому что изображения не включены.CSS-анимация не работает в Internet Explorer

HTML/CSS:

<!doctype html> 
<html> 
<title>Macht IT Solutions</title> 
<head> 
    <style> 
     #body1 { 
      position: relative; 
      background-Color: white; 
      font-color: white; 
      width: 1000px; 
      margin: 0 auto; 
      z-index: -1; 
     } 

     #body2 { 

      position: absolute; 
      top: 140px; 
      font-color: white; 
      width: 1000px; 
      height: 1000px; 
      margin: 0 auto; 
      z-index: 0; 
     } 

     #background { 
      opacity: 0.8; 
      position: absolute; 
      top: 0px; 
      background-image: url("back.jpg"); 
      font-color: white; 
      width: 1000px; 
      height: 1000px; 
      margin: 0 auto; 
      z-index: 1; 
      -webkit-animation-name: bodyback; 
      -webkit-animation-duration: 30s; 
      -webkit-animation-iteration-count: infinite; 
      animation-name: bodyback; 
      animation-duration: 30s; 
      animation-delay: 5s; 
      -webkit-animation-delay: 5s; 
      animation-iteration-count: infinite; 
      animation-timing-function: ease-in; 
      -webkit-animation-timing-function: ease-in-out; 
      animation-timing-function: ease-in-out; 
     } 

     #logo { 
      border: 1px solid black; 
      background-color: black; 
      color: white; 
      padding: 5px; 
      border-radius: 5px 0px 5px 0px; 
      background-image: url("networking.jpg"); 
      background-repeat: no-repeat; 
      background-size: cover; 
      background-position: center; 
      height: 130px; 
     } 

     #about { 
      position: absolute; 
      top: 10px; 
      color: black; 
      border: 1px solid blue; 
      background-color: white; 
      border-radius: 5px 0px 5px 5px; 
      padding: 4px; 
      width: 500px; 
      z-index: 2; 
     } 

     #aboutmetext { 
      position: absolute; 
      top: 100px; 
      background-color: white; 
      color: black; 
      float: left; 
      width: 500px; 
      border: 1px solid blue; 
      padding: 4px; 
      border-radius: 5px 30px 20px 20px; 
      z-index: 2; 
     } 

     #video { 
      position: absolute; 
      top: 30px; 
      left: 550px; 
      border: 1px solid blue; 
      background-color: white; 
      float: right; 
      overflow: hidden; 
      border-radius: 10px 10px 0px 0px; 
      height: 360px; 
      z-index: 2; 
     } 

     #serv { 
      position: absolute; 
      top: 400px; 
      float: left; 
      width: 500px; 
      border: 1px solid blue; 
      padding: 4px; 
      border-radius: 5px 30px 20px 20px; 
      color: black; 
      background-color: white; 
      z-index: 2; 
     } 

     #services { 
      position: absolute; 
      top: 300px; 
      font-color: black; 
      float: left; 
      height: 30px; 
      border: 1px solid blue; 
      padding: 4px; 
      background-color: white; 
      border-radius: 5px 0px 5px 0px; 
      color: black; 
      width: 500px; 
      z-index: 2; 
     } 

     #contactus { 
      position: absolute; 
      top: 550px; 
      float: left; 
      height: 30px; 
      border: 1px solid blue; 
      padding: 4px; 
      background-color: white; 
      border-radius: 5px 0px 5px 0px; 
      color: black; 
      z-index: 2; 
     } 

     #contact { 
      position: absolute; 
      top: 650px; 
      float: left; 
      width: 500px; 
      border: 1px solid blue; 
      padding: 4px; 
      border-radius: 5px 30px 20px 20px; 
      color: black; 
      background-color: white; 
      z-index: 2; 
     } 

     @KeyFrames bodyback { 
      0% { 
       background-image: url("back.jpg"); 
      } 
      25% { 
       background-image: url("net1.jpg"); 
      } 
      50% { 
       background-image: url("net2.jpg"); 
      } 
      100% { 
       background-image: url("net3.jpg"); 
      } 
     } 

     @-webkit-keyframes bodyback { 
      0% { 
       background-image: url("back.jpg"); 
      } 
      25% { 
       background-image: url("net1.jpg"); 
      } 
      50% { 
       background-image: url("net2.jpg"); 
      } 
      100% { 
       background-image: url("net3.jpg"); 
      } 
     } 

     @KeyFrames { 
     } 

     @KeyFrames { 
     } 

     @KeyFrames { 
     } 
    </style> 
</head> 
<body id="body1"> 
<div id="logo" style="font-size:30px"> 
    <img src="machtlogo1.png" height="100" width="100"> Macht IT Solutions 
</div> 
<div id="body2"> 
    <div id="background"></div> 
    <h1 id="about">About us</h1> 

    <div> 
     <p id="aboutmetext"> 
      <font> 
      </font> 
     </p> 

     <div id="video"> 
      <p align="center"> 
       <font color="black"> 
        <b> 
         What is the Internet? 
        </b> 
       </font> 
      </p> 
      <iframe width="420" height="315" src="https://www.youtube.com/embed/Jj6EHgSsx_U?autoplay=0"> 
      </iframe> 
     </div> 
    </div> 
    <div> 
     <h1 id="services"><font color="black">Services</font></h1> 
    </div> 
    <div id="serv"> 
     <p> 
      <font color="black"> 
       inquiry. 
      </font> 
     </p> 
    </div> 
    <div> 
     <h1 id="contactus"><font color="black">Contact us</font></h1> 
    </div> 
    <div id="contact"> 
     <p> 
      <font color="black"> 
      </font> 
     </p> 
    </div> 
</div> 
</body> 
</html>

источник

2015-05-21 colobia

Какая версия IE? Ключевые кадры поддерживаются только в IE10 +. –

Я использую версию 11 Internet Explorer. – colobia

Ключевые фреймы не работают с фоновыми изображениями. См. Этот вопрос: http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations – GreeKatrina

-2

Вы используете -webkit-animation-name, который поддерживается только в Google Chrome.

Попробуйте использовать -ms-animation-name.

источник

2015-05-21 18:05:27 Rubenxfd

Все еще не будет Работа. – colobia

Начиная с 10, Internet Explorer поддерживает 'anim-name' unprefixed. – Sampson

Недвижимость background-image не является анимационной, в соответствии с спецификацией CSS Transitions.

Вы не должны ожидать, что это будет работать в любом браузере на момент написания этой статьи. Это может измениться в будущем, хотя по мере экспериментов с экспериментами, а органы по стандартизации продолжают поддерживать новые и творческие возможности.

Если вы хотите поменять фоновое изображение промежуточный, вы должны сделать это со сценарием или анимировать положение/размер отдельных фоновых изображений на одном элементе, а не пытаться анимировать сам фон.

источник

2015-05-21 23:41:03 Sampson

CSS-анимация не работает в Internet Explorer

ответ

Смежные вопросы