Beyond CSS-Only Animation in CSS

The use of CSS alone for creating animation has limitations, in that it can only produce basic level of dynamism. This means that it is not well-suited for complex animation, such as is required for Web games, be they 2D or 3D. For complex animations, other Web languages are needed and there are various. Those designed for the Web include JavaScript and WebGL. JavaScript is a general purpose computer programming language that can be used to manipulate HTML elements more dynamically than CSS. WebGL (Web Graphics Library), however, is basically a set of JavaScript routines, protocols, and tools designed for rendering (i.e., drawing) 2D and 3D graphics in Web browsers. Combining HTML, CSS, JavaScript, and WebGL, the complexity of the graphics and animation that can be achieved is possibly limited only by imagination. It makes it possible to create realistic graphics as well as interactive 2D and 3D animation, such as is required in games, using various types of materials (shaders), textures, lighting, and camera movements.

However, combining these technologies to create complex animations requires programming expertise. Fortunately, there are free JavaScript libraries that make it easier to use WebGL. One of these is three.js. How the libraries are used with HTML and example projects are available at the website (threejs.org). How JavaScript is used with HTML is shown in Chapter 22.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *