如何制作一个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%
    }
}   

我希望文字只有在宽度为＆gt;时才能从左向右弹跳。 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%

    }
}