我的新闻div滚动..我想让它快速

Question

这是我的新闻div，从底部到向上滚动。但是要开始滚动需要时间...我想让它快速。在这里，此div从我的系统y axix出现...但是实际上我只想从确切的div开始，我的滚动div实际上在另一个div中，但是动画从系统屏幕的底部开始。特定div

的内部

.example1 {
  -moz-transform: translateY(10%);
  -webkit-transform: translateY(10%);
  transform: translateY(10%);
  /* Apply animation to this element */
  -moz-animation: example1 2s linear infinite;
  -webkit-animation: example1 2s linear infinite;
  /*animation: example1 22s linear infinite;*/
  animation: example1 70s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
  0% {
    -moz-transform: translateY(10%);
  }
  100% {
    -moz-transform: translateY(-10%);
  }
}
@-webkit-keyframes example1 {
  0% {
    -webkit-transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(-10%);
  }
}
@keyframes example1 {
  0% {
    -moz-transform: translateY(10%);
    /* Firefox bug fix */
    -webkit-transform: translateY(10%);
    /* Firefox bug fix */
    transform: translateY(50%);
  }
  100% {
    -moz-transform: translateY(-10%);
    /* Firefox bug fix */
    -webkit-transform: translateY(-10%);
    /* Firefox bug fix */
    transform: translateY(-10%);
  }
}

<?php
                  $upcoming_news = $this->mastermodel->get_upcoimg_news();
              ?>
  <div class="example1" id="example1">
    <ul <?php if($this->lang->lang()=='ar') { ?> dir="RTL"
      <?php } ?>>
      <?php
                         foreach ($upcoming_news as $row) {
                              if ($this->lang->lang() == 'ar')
                                $news = $row['news_description_ar'];
                              else
                                 $news = $row['news_description_en'];
                                                    ?>
        <li <?php if($this->lang->lang()=='ar') { ?> dir="RTL" style="text-align:right"
          <?php } ?>>
          <?= $news; ?> <br />
        </li>
        <?php
                                                }
                                                ?>
    </ul>
  </div>

Answer 1

您在animation: example1 70s linear infinite;中的时间确实很长。尝试将其更改为2s。

看一下：https：//jsfiddle.net/3ce7309o/

Answer 2

尝试将您的价值更改为animation: example1 2s linear infinite;，以加快动画的加速。您的代码是正确的，但是动画的时间很长。

也请确保您对这两个值也具有相同的值。-moz-animation:，-webkit-animation:

.example1 {
  -moz-transform: translateY(10%);
  -webkit-transform: translateY(10%);
  transform: translateY(10%);
  /* Apply animation to this element */
  -moz-animation: example1 2s linear infinite;
  -webkit-animation: example1 2s linear infinite;
  animation: example1 2s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
  0% {
    -moz-transform: translateY(10%);
  }
  100% {
    -moz-transform: translateY(-10%);
  }
}
@-webkit-keyframes example1 {
  0% {
    -webkit-transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(-10%);
  }
}
@keyframes example1 {
  0% {
    -moz-transform: translateY(10%);
    /* Firefox bug fix */
    -webkit-transform: translateY(10%);
    /* Firefox bug fix */
    transform: translateY(50%);
  }
  100% {
    -moz-transform: translateY(-10%);
    /* Firefox bug fix */
    -webkit-transform: translateY(-10%);
    /* Firefox bug fix */
    transform: translateY(-10%);
  }
}

<div class="example1" id="example1">
  <ul>
    <li>Quisque a ipsum vulputate, aliquam nibh et, euismod purus.</li>
    <li>Nulla et metus laoreet, commodo turpis eget, venenatis nibh.</li>
    <li>Praesent varius nunc et accumsan fermentum.</li>
    <li>Duis vitae nisi posuere, efficitur turpis in, sollicitudin ipsum.</li>
    <li>Sed vel lorem vehicula, molestie enim vel, scelerisque nisl.</li>
    <li>Maecenas feugiat nibh non tincidunt blandit.</li>
  </ul>
</div>