高级Marquee过渡

Question

<marquee direction="up" behavior="scroll" scrollamount="3" onmouseover="this.scrollAmount=1" onmouseout="this.scrollAmount=3" style="height:295px;margin-top:10px;">
   <ul class="menu">
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;(DASA) 2014-15 <img class="new-tag" src="assets/img/new.gif"/></a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Advertisement for admission to  SC seats 2014</a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Notification - SC/ST & Minority Cell</a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Information About SC-ST Scholarship</a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Project Vacancy: (JRF) <img class="new-tag" src="assets/img/new.gif"/> </a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;PG Admission (January Session) 2015</a></li>
   </ul><!-- /.menu -->
</marquee>

我希望在一个3组中显示这些元素，即前3个元素应该向上滑动，在屏幕上停留3秒，然后向上滑动。接下来的3个元素将通过滑动而变得可见。我如何达到这个效果呢？

Answer 1

不要使用marquee，它并不是所有浏览器都支持的，并且计划删除。来源：https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee

您将需要使用JavaScript或CSS 3动画。使用CSS3动画的示例：http://codepen.io/anon/pen/jWezPm

    /* The animation code */
@keyframes example {
    0%   {margin-top: 0; height: 90px;}
    20%  {margin-top: 0; height: 90px;}
    25%  {margin-top: -90px; height: 180px;}
    45%  {margin-top: -90px; height: 180px;}
    50%  {margin-top: -180px; height: 270px;}
    70%  {margin-top: -180px; height: 270px;}
    75%  {margin-top: -270px}
    95%  {margin-top: -270px}
}

/* The element to apply the animation to */
.menu {
    margin: 0;
    padding: 0;
    height: 90px;
    animation: example 8s infinite;
}

.menu li {
  display: block;
  margin: 0;
  padding: 0;
  height: 30px;
  line-height: 30px;
}

Answer 2

我不认为仅仅用html就能做到这一点。

我建议尝试使用JQuery