我的新闻div滚动...我想快点

Question

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

<form method="post">
  <button type="submit" name="test"> 10  </button>
</form>

<?php
    if(!isset($_SESSION['money']))
    {
       $_SESSION['money'] = 100;
    }

    if(isset($_POST['test']))
    {
        $money = $_SESSION['money'];
        $money++;
        $_SESSION['money']= $money;
        echo $money;
    }
?>

.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%);
  }
}

Answer 1

你在animation: example1 70s linear infinite;的时间真的很长。尝试将其更改为2秒。

看看这个：https://jsfiddle.net/3ce7309o/

Answer 2

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

另外请确保这两个值也有相同的值。 -moz-animation:，-webkit-animation:

＆＃13;

＆＃13;

.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%);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;