Drawing and animation

For a modern app experience, use of animations and lightweight graphics is essential. The following pages provide what you need in this area.

CSS transforms

CSS transforms let you rotate, scale, and zoom HTML content, taking advantage of hardware acceleration where available, all without relying on JavaScript code.

CSS transitions

CSS transitions let you animate changes to your CSS. Once a transition effect is configured, changes to your CSS occur over a period of time instead of instantaneously. This makes it possible to easily and efficiently create a wide variety of visual effects in your apps.

CSS animations

CSS animations let you animate changes to your document on a more fundamental level, using keyframes to precisely configure the animation effect. This also lets you create looping animation effects rather than effects that happen just once, as is the case with transitions, all without relying on JavaScript.

HTML canvas

The HTML <canvas> element provides a 2D graphics workspace for you to draw in. This has many uses, including 2D games.

WebGL

WebGL is a Web-friendly version of OpenGL ES that lets your app offer hardware-accelerated 3D graphics.

SVG

Scalable Vector Graphics (SVG) is a technology that lets you draw graphics using vectors instead of bitmapped images. This is great for scalability, presenting diagrams and charts, and for high-quality, scalable user interfaces.