0

对于以下段落，我想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%;
  }
}
4

1 回答 1

1

据我所知，使用 CSS animate 我们只能为整个标签本身设置动画，但不能为其中的内容设置动画（即），在这种情况下，我们可以将整个跨度移动到页面维度上，但不能移动其中的文本。所以我使用了更灵活的变换属性。

我在这里有一个 jsfiddle来证明这一点。

我更改的 CSS Animate 代码：

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

希望这会有用。

于 2013-08-02T14:59:00.450 回答