动画内联元素全宽滚动

Question

对于下面的段落，我想要在鼠标悬停时以动画方式滚动span元素。它将向右滚动，直到结束。

  <div class="one_line">
    <span>
        NoMagic framework doesn't try to put anything into the blackbox. We hope you read the core source code and try to get fully understanding before you start to using it. And we hope you forking our project and creating your own database helper function sets based on your need.

        Using NoMagic, you will turn the MySQL database into a schemaless solution, the schemaless database will save your time so that you don't need to spend to much time in planning database table structure.
    </span>
  </div>

我已经拥有的css

.one_line {
  line-height: 1.5em;
  height: 1.5em;
  position: relative;
  width: 600px;
  overflow-x: hidden;
  span {
    white-space: nowrap;
    height: 100%;
    display: inline-block;
    position: absolute;
    &:hover {
      animation-name: scroll;
      animation-duration: 6s;
    } 
  }
}

@keyframes scroll {
  50% {
    left: 100%;
  }
}

Answer 1

据我所知，使用CSS动画，我们只能动画整个标签本身，而不是它的内容(即)在这种情况下，我们可以在页面维度上移动整个跨度，但不能移动其中的文本。所以我使用了transform属性，它更灵活。

我有一个jsfiddle here来演示这一点。

CSS动画代码，我已经改变了：

@keyframes scroll { 
   0%   {  
         transform:translateX(0);  
        }  
   100% {  
         transform:translateX(-100%);  
        }
}

希望这将是有用的。