我的新闻 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>