Question

我一直在Google和stackoverflow上研究这个问题。没有什么似乎有帮助，我相信我有必要的每个供应商前缀以及所有正确的代码。我甚至让其他开发人员为我看这个，他们认为它看起来是正确的。我正在尝试使用CSS动画进行文本滚动的移动动画。我不确定我是否遗漏了一些明显的东西，有一个错字或是否有可能让它在FF和IE上工作。它适用于Chrome和Safari。请放轻松我，我对此很新，这是我的第一个问题。我已经认真花了至少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中不起作用，我有所有供应商前缀并且已经研究了好几天

1 个答案: