How can I create a marquee effect

Question

I m creating a marquee effect with CSS3 animation    x000D   x000D   caption   x000D      position  fixed  x000D      bottom  0  x000D      left  0  x000D      font-size  20px  x000D      line-height  30px  x000D      height 30px  x000D      width  100   x000D      white-space  nowrap  x000D      -moz-animation   caption 50s linear 0s infinite  x000D      -webkit-animation   caption 50s linear 0s infinite  x000D    x000D   -moz-keyframes caption    x000D      0    margin-left 120     100    margin-left -4200px      x000D    x000D   -webkit-keyframes caption    x000D      0    margin-left 120     100    margin-left -4200px      x000D    x000D   lt div id  caption  gt  x000D      The quick brown fox jumps over the lazy dog  The quick brown fox jumps over the lazy dog  the quick brown fox jumps over the lazy dog  x000D   lt  div gt  x000D   x000D   x000D    Now I can get the basic marquee effect  but the code is too specific for this demo   Is there a way to avoid using specific values like margin-left -4200px   so that it can adapt text in any length   Here is a similar demo  http   jsfiddle net jonathansampson XxUXD  that uses text-indent but still with specific values

User · Answer

Based on the previous reply  mainly  fcalderan  this marquee scrolls when hovered  with the advantage that the animation scrolls completely even if the text is shorter than the space within it scrolls  also any text length takes the same amount of time  this may be a pros or a cons  when not hovered the text return in the initial position   No hardcoded value other than the scroll time  best suited for small scroll spaces   x000D   x000D   marquee   x000D      width  100   x000D      margin  0 auto  x000D      white-space  nowrap  x000D      overflow  hidden  x000D      box-sizing  border-box  x000D      display  inline-flex      x000D    x000D   x000D   marquee span   x000D      display  flex          x000D      flex-basis  100   x000D      animation  marquee-reset  x000D      animation-play-state  paused                  x000D    x000D   x000D   marquee hover gt  span   x000D      animation  marquee 2s linear infinite  x000D      animation-play-state  running  x000D    x000D   x000D   keyframes marquee   x000D      0    x000D          transform  translate 0   0   x000D            x000D      50    x000D          transform  translate -100   0   x000D        x000D      50 001    x000D          transform  translate 100   0   x000D        x000D      100    x000D          transform  translate 0   0   x000D        x000D    x000D   keyframes marquee-reset   x000D      0    x000D          transform  translate 0   0   x000D          x000D    x000D   lt span class  marquee  gt  x000D       lt span gt This is the marquee text lt  span gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

With a small change of the markup  here s my approach  I ve just inserted a span inside the paragraph    x000D   x000D   marquee     width  450px    margin  0 auto    overflow  hidden    box-sizing  border-box      marquee span     display  inline-block    width  max-content     padding-left  100        show the marquee just outside the paragraph      will-change  transform    animation  marquee 15s linear infinite      marquee span hover     animation-play-state  paused      keyframes marquee     0    transform  translate 0  0       100    transform  translate -100   0            Respect user preferences about animations      media  prefers-reduced-motion  reduce       marquee span       animation-iteration-count  1      animation-duration  0 01          instead of animation  none  so an animationend event is         still available  if previously attached              width  auto      padding-left  0        x000D   lt p class  marquee  gt      lt span gt         When I had journeyed half of our life s way  I found myself        within a shadowed forest  for I had lost the path that         does not stray       Dante Alighieri   lt i gt Divine Comedy lt  i gt           1265-1321      lt  span gt      lt  p gt  x000D   x000D   x000D    No hardcoded values     dependent on paragraph width      have been inserted  The animation applies the CSS3 transform property  use prefixes where needed  so it performs well  If you need to insert a delay just once at the beginning then also set an animation-delay  If you need instead to insert a small delay at every loop then try to play with an higher padding-left  e g  150

User · Answer

The accepted answers animation does not work on Safari  I ve updated it using translate instead of padding-left which makes for a smoother  bulletproof animation   Also  the accepted answers demo fiddle has a lot of unnecessary styles    So I created a simple version if you just want to cut and paste the useful code and not spend 5 mins clearing through the demo   http   jsfiddle net e8ws12pt    x000D   x000D   marquee   x000D      margin  0 auto  x000D      white-space  nowrap  x000D      overflow  hidden  x000D      box-sizing  border-box  x000D      padding  0  x000D      height  16px  x000D      display  block  x000D    x000D   marquee span   x000D      display  inline-block  x000D      text-indent  0  x000D      overflow  hidden  x000D      -webkit-transition  15s  x000D      transition  15s  x000D      -webkit-animation  marquee 15s linear infinite  x000D      animation  marquee 15s linear infinite  x000D    x000D   x000D   keyframes marquee   x000D      0    transform  translate 100   0   -webkit-transform  translateX 100      x000D      100    transform  translate -100   0   -webkit-transform  translateX -100      x000D    x000D   lt p class  marquee  gt  lt span gt Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone  Edison bulb blue bottle neutra shabby chic  Kitsch affogato you probably haven t heard of them  keytar forage plaid occupy pitchfork  Enamel pin crucifix tilde fingerstache  lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter  lt  span gt  lt  p gt  x000D   x000D   x000D

User · Answer

The following should do what you want    keyframes marquee       from    text-indent   100        to      text-indent  -100

[html] How can I create a marquee effect?

Examples related to html

Examples related to css

Examples related to css-animations