css - 如何制作CSS文本溢出动画

Question

我现在有这个http://codepen.io/capraruioan/pen/dXyyMp

.parent
  position: relative
  width: 300px
  border: 1px solid black
  margin-left: 40%
  height: 20px
  .child
    position: absolute
    min-width: 100%
    white-space: nowrap
    animation-name: bounceText
    animation-duration: 5s
    animation-direction: alternate
    animation-iteration-count: infinite
    animation-timing-function: linear
@keyframes bounceText {
    0% {
        left: 0
    }
    100% {
    right: 0%
      // left: -100%
    }
}   

只有当宽度 > 100% 时，我才希望文本从左向右跳动

这就是我设置 min-height: 100% 的原因 理想的情况是从左:0 弹跳到右:0。但是如果我那样做就没有动画了..

我可以只使用 CSS 来实现吗？我不想使用 jquery

Answer 1

我不太明白你在问什么，但也许是这样的？

.parent
  position: relative
  width: 450px
  border: 1px solid black
  margin-left: 34%
  height: 20px
  .child
    display: block
    position: absolute
    min-width: 100%
    white-space: nowrap
    animation-name: bounceText
    animation-duration: 2s
    animation-direction: alternate
    animation-iteration-count: infinite
    animation-timing-function: linear
@keyframes bounceText {
    0% {
        left: 0%
    }
    100% {
    left: 18%

    }
}