2

Css marquee like effect is flickering sometimes. The animation is not smooth as we expected. It stuck sometimes. I tried the solution available on diff stackoverflow posts but that did not help me much.

http://codepen.io/anon/pen/vmLGXJ

.marquee {
    width: 100%;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;

}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    -webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    from   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
Jitender
  • 7,593
  • 30
  • 104
  • 210
  • When clicking the codepen it start an infinity page reload loop? Some bug on codepen? – Red Apr 19 '17 at 09:42
  • @RichardMauritz I dont think so. Mine is working fine – Jitender Apr 19 '17 at 09:54
  • Can not reproduce the flickering. Can you give more infos? What exactly is flickering? By flickering do you mean the text is blurry? - edit: reloaded the page and saw it once: Do you mean its like: Doesnt move for 1 frame, but then move double the way in the next frame? - reloading the page again 10 times and I can not reproduce it anymore – nbar Apr 19 '17 at 17:56
  • does this sound related for you? http://stackoverflow.com/questions/29320724/css3-marquee-effect-performance-issues – nbar Apr 19 '17 at 18:03
  • @nbar: it may be depend on pc hardware configuration because it is easy to reproduce in window machine but it mac machine the performance is increased compare to window but still flickers. In tizen tv you can see it everytime – Jitender Apr 20 '17 at 04:05

2 Answers2

0

try to write

from   { transform: translate(0, 0); }
to { transform: translate(-100%, 0); } /* Instead of 100% */

Also you can try to use all prefix, -moz- and -webkit-

gerardet46
  • 76
  • 1
  • 9
-1
animation: marquee 15s linear infinite; // you can change the time like 15s to 50s
Shital Marakana
  • 2,817
  • 1
  • 9
  • 12