CSS3 Transition and animation implement Merry

This period of time is doing a app,h5 development. There are announcements on the page that appear in the form of merry.

At the beginning of the direct use of the marquee tag, later found in the iOS client, the merry move is not smooth enough, there is a jitter phenomenon.

For obsessive-compulsive disorder I was unbearable, and then use JS to write, found that the Andriod and iOS client merry move is not smooth, will jitter.

Later thought can use CSS3 transition and animation to write, share the code!

Transition notation

<! DOCTYPE html>body{padding:0; margin:0;} #demo {width:100%; Height:50px;background: #eee;p osition:fixed;} #demo>#spa {Word- Break: keep-All;white-Space:nowrap;position:absolute;left:100%; font-Size:30px;line-height:50px;}</style>varSpa = document.getElementById ("Spa"); varSpaw =Spa.offsetwidth; varBodyw =Document.body.clientWidth; varW = 0-(spaw+Bodyw); Spa.style.transform= ' Translate (' + W + ' px, 0px) '; Spa.style.transition= ' Transform 5s linear '; Window.setinterval (function() {Spa.style.transform= ' translate (0px, 0px) '; Spa.style.transition= ' transform 0s linear '; Window.settimeout (function() {Spa.style.transform= ' Translate (' + W + ' px, 0px) '; Spa.style.transition= ' Transform 5s linear '; },100)     },5000)</script>
Note that on the iphone4s, the Transition property suggests separate write, direct write transition set four properties, Ihone4s Browser is not recognized.
Animation notation
<! DOCTYPE html>#demo {width:100%; Height:50px;background: #eee;p osition:fixed;} #demo>Span{word- Break: keep-All;white-Space:nowrap;position:absolute;left:100%; font-Size:30px;line-height:50px;} #demo>. a{-webkit-Animation:demo 5s Infinite;-webkit-animation-timing-function: linear;}</style><style id= ' asty ' ></style>varSpa = document.getElementById ("Spa"); varwidth = 0-(Spa.offsetwidth); varstyle = document.getElementById ("Asty"); Style.innerhtml= ' @-webkit-keyframes demo{from {left:100%;} To {left: ' +width+ ' px;} '; Spa.classname= ' A ';</script>
CSS3 Transition and animation implement Merry