CSS 移动动画在 FF 或 IE 中不起作用，我有所有的供应商前缀并且已经研究了好几天

Question

我已经在 Google 和 Whosebug 上研究了好几天了。似乎没有任何帮助，我相信我拥有所有必要的供应商前缀以及所有正确的代码。我什至让其他开发人员帮我看过这个，他们认为它看起来是正确的。我正在尝试使用 CSS 动画为文本滚动制作移动动画。我不确定我是否遗漏了一些明显的东西，有拼写错误，或者是否无法让它在 FF 和 IE 上运行。它在 Chrome 和 Safari 上运行良好。请对我放轻松，我对此很陌生，这是我的第一个 SO 问题。我已经认真地花了至少 6-8 个小时来研究并试图弄清楚我做错了什么，但没有运气。我能够进行一些推荐的调整，但在 FF 或 IE 中对我来说没有任何效果。

这是我的 HTML:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Special+Elite">

<div class="text-scroll">
  <p>I'm a</p>
  <div class="scrolling-words">
    <p>front end engineer.</p>
    <p>curious creator.</p>
    <p>knowledge junkie.</p>
    <p>collaborator.</p>
  </div>
  <div></div>
</div>

这是我的 CSS:

body {
background: url('http://subtlepatterns.com/patterns/notebook.png');
}

* {
font-family: "Special Elite", cursive;
}

/*******************************
ROLLING TEXT KEYFRAME
********************************/

.text-scroll p {
height: 20px;
float: left;
white-space: nowrap;
position: relative;
font-size: 43px;
font-weight: bold;
margin-top: 22%;
}

.text-scroll {
max-height: 50px;
max-width: 586px;
margin: 0 auto;
padding-left: 15%;
float: left;
}

.scrolling-words {
overflow: hidden;
height: 54px;
padding-left: 15px;
margin-top: 21%;
}

.scrolling-words p {
margin: 0 0 30px;
padding-top: 5px;
white-space: nowrap;
-webkit-animation: move 8s 1s infinite;
-moz-animation: move 8s 1s infinite;
-o-animation: move 8s 1s infinite;
animation: move 8s 1s infinite;
font-size: 43px;
letter-spacing: 1px;
}

@-moz-keyframes move {
0%  { top:  0px;   }
20% { top: -56px;  }
40% { top: -110px; }
60% { top: -167px; }
80% { top: -175px; }
80% { top: -0px;   }
}

@-o-keyframes move {
0%  { top:  0px;   }
20% { top: -56px;  }
40% { top: -110px; }
60% { top: -167px; }
80% { top: -175px; }
80% { top: -0px;   }
}

@-webkit-keyframes move {
0%  { top:  0px;   }
20% { top: -56px;  }
40% { top: -110px; }
60% { top: -167px; }
80% { top: -175px; }
80% { top: -0px;   }
}

@keyframes move {
0%  { top:  0px;   }
20% { top: -56px;  }
40% { top: -110px; }
60% { top: -167px; }
80% { top: -175px; }
80% { top: -0px;   }
}
/*******************************/

感谢所有提供帮助的人。我在 CodePen 中也有我的代码，在这里：http://codepen.io/raveve/pen/NPmPRP

Answer 1

将第二个 80% 替换为 100% 对我有用：

  @keyframes move {
    0%  { top:  0px;   }
    20% { top: -56px;  }
    40% { top: -110px; }
    60% { top: -167px; }
    80% { top: -175px; }
    100% { top: -0px;   }
  }

无论如何，您不需要特定的浏览器属性。所有最新的浏览器都支持 CSS 转换。

CSS 移动动画在 FF 或 IE 中不起作用，我有所有的供应商前缀并且已经研究了好几天

CSS Move Animation not working in FF or IE, I have all the vendor prefixes and have researched for days

css

firefox

animation