html - 如何在IE上有跑马灯效果？

Question

以下是适用于 chrome 和 firefox 的选取框。但它不适用于 Internet Explorer。这是为什么 ？我怎样才能让它发挥作用？这是 jsfiddle

HTML

<p class="marquee">
    <span>
        Hey! What's up? <br />
        Second Line <br />
        Third Line <br />
        Fourth Line <br />
        Fifth Line <br /    
    </span>

CSS

    /* define the animation */
@-webkit-keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(0, -100%); }
} 
@-moz-keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(0, -100%); }
} 


/* define your limiting container */
.marquee {
  border: solid 2px;
  white-space: nowrap;
  overflow: hidden;
  border-color: #0aa2e3;
  box-sizing: border-box;
  height:60px;
}
/* this is the tray moving around your container */
.marquee span {
  display: inline-block;
  text-indent: 0;
  animation: marquee 15s linear infinite; /* here you select the animation */
  -webkit-animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

Answer 1

你只为 MOZILLA 和 WEBKIT 添加了 keyframe vendor prefix 但没有使用标准的 @keyframes.

看看 DEMO .

    /* Standard animation */
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(0, -100%); }
}