包装CSS3滑块

Question

Within this fiddle , I'm using CSS3 to slidein text (sample below). However, I'd like it to wrap around to effectively implement a ticker. Though the problem seems to involve micro-managing pixels to both add more text and create a clean transition.

@-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:100%
      }
      to {
        margin-left:0%;
        width:100%;
      }
    }

Advice?

Here is an example , but I would like to use CSS.

Answer 1

Booom your code here: SmoothTextFlow

     h1 {
      -webkit-animation-duration: 15s;
      -webkit-animation-name: slidein;
      -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: graysc;
}

@-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:100%
      }
      to {
        margin-left:0%;
        width:100%;
      }
    }

Answer 2

This is one way to get it done: http://jsfiddle.net/ytKV5/ . Use Chrome. I did not want to create code for every extension.

Keep in mind that from CSS you cannot adjust the speed of the slide based on the length of the scrolling text. The longer the text, the faster it'll scroll.

HTML:

<div id = "wrapper">
    <h1>Scrolling text....scrolling...scrolling</h1>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

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

    100% {
        left: 100%;
        -webkit-transform: translateX(-150%);  
    }
}

#wrapper {
    width: 200px;
    height: 40px;
    outline: 1px solid #000;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

#wrapper > h1 {
    white-space: nowrap;
    line-height: 40px;
    position: absolute;
    top: 0;
    -webkit-animation: scroll-text 15s linear infinite;
}