Cisco Cisco StadiumVision Mobile Streamer Maintenance Manual

not guaranteed or tested for external web content. External web content can negatively

impact the operation of your DMPs.

Animations that use JavaScript timers, including the JQuery .animate() library, do not

make an efficient use of GPU resources and are not accurate enough to achieve

smooth animations. For this reason, we recommend using CSS animations whenever

possible. The JQuery Transit library uses CSS animations and provides an API similar

to the .animate() library.

The SVG protocol should be used to specify vector animations.

Bitmap animations display smoothly when they are 1/3 or less of a 1080p HTML

canvas. Setting the canvas size to 720p allows for larger high-quality animations to

occupy the screen.

All CSS transforms should be specified as WebKit transforms. When performing a

transform on a <div> or graphics element, we do not recommend specifying the

transform in-line.

Animations that use the "top" and "left" properties are rendered using the CPU. We

recommend using the translate() and translate3d() methods instead to

offload work onto the GPU, ensuring smoother animations.

The following code shows an example of an effective CSS transform:

<style>

.flipme{

-webkit-animation-name:flipon;

-webkit-animation-fill-mode:forwards;

-webkit-animation-iteration-count:1;

-webkit-animation-duration:2s;

44 of 48

© Cisco Systems, Inc. All rights reserved.