Css transition using -webkit-transition: all 0.5s ease-in-out;
Testing animating both margin-left and transform: translateX();
| Device | margin-left | transform: translate(); | transform: translateX(); | Top with Pos Relative |
| DMP | Choppy | Incredibly choppy - only a few frames. "pops" Y axies on last frame. | Incredibly choppy - only a few frames. "pops" Y axies on last frame. | Smooth |
| Samsung | Works but choppy | Plays smoothly | Plays smoothly | Smooth but not quite as smooth as translate |
| iPad | Smooth but skips frames and has render artifacts |
Note, due to the fact the screen is refreshed top to bottom on the DMP, vertical animations may appear smoother than horizontal animations, due to screen tearing.
Testing a css transition with both a translate and fade
| Dmp | iPad | Samsung |
| Terribly choppy with both margin-left and transform | Smooth | Smooth |
Notice:
Samsung - position: relative:
Rendering *any element* on a Samsung screen using ```position: relative;``` will cause slow-downs when animation occurs, regardless of what is animating. *Don't use it*.
Samsung - background-color :
Animating `background-color` property causes black screen during animation