Traditionally, the style changes immediately when we apply a new style to an element. CSS3 transition renders in-between styles during the style changes of the target elements over duration. For example, here, we have a blue box and want to change it to dark blue when we do a mouseover. We can do this by using the following code snippets:

HTML:

<a href="#" class="box"></a>

CSS:

a.box {
  display: block;
  width: 100px;
  height: 100px;
  background: blue;
}
a.box:hover {
  background: darkblue;
}

The box changes to dark blue immediately when we do a mouseover. With CSS3 transition applied, we can tween the styles for a specific duration and easing value:

a.box {
  transition: all 0.5s ease-out;
}

In the past, we needed JavaScript to calculate and render the in-between styles; this is much slower than using CSS3 transition because the browser natively makes the effects happen.

CSS3 transform lets us scale the elements, rotate them, and translate their position. CSS3 transform is divided into 2D and 3D. By combining the transform origin and 3D rotation and translation, we can animate 2D graphics in a 3D space.

CSS3 transition is one type of animation. It declares the tweening animation between two styles of the elements.

CSS3 animation is one step further in animation. We can define key frames of an animation. Each key frame contains a set of properties that should change at any particular moment. It is like a set of CSS3 transitions that are applied in sequence to the target element.

The AT-AT Walker (http://anthonycalzadilla.com/css3-ATAT/index-bones.html) shows a nice demo on creating a skeleton bone animation with CSS3 animation key frames, transform, and transition. This is shown in the following diagram:

The web standards are open and free for use. In contrast, third-party tools are usually proprietary and they cost money. With proprietary technologies, the support from them may drop because of changes to the company's focus. The standardization and openness of HTML5 ensures that we will have browsers that support it.

With the built-in support of all the HTML5 features in modern browsers, we do not require the users to preinstall any third-party plugin in order to play any file. These plugins are not standard. They usually require an extra plugin installation that you may not be able to install. For instance, millions of Apple iOS devices around the world do not support third-party plugins, such as Flash Player, in their mobile Safari. Despite whatever the reason might be, Apple does not allow Flash Player to run on their Mobile Safaris, instead, HTML5 and the related web standard are what they get in their browsers. We can reach this user base by creating HTML5 games that are optimized for mobiles.

When we code the game in a Canvas, there are some rendering engines that can translate our Canvas drawing code into OpenGL, thus rendering in native mobile device. This means that while we are still coding the game for a web browser, our game can gain benefits in mobile devices by the native app OpenGL rendering. Ejecta (http://impactjs.com/ejecta) and CocoonJS (http://ludei.com/cocoonjs) are two such engines.

In traditional game designing, we build games within a boundary box. We play video games on a television. We play Flash games in web browsers with a rectangle boundary.

Using creativity, we are not bound in a rectangle game stage any more. We can have fun with all the page elements.

Twitch (http://reas.com/twitch/) is a game from Chrome Experiments. It is a collection of mini games where the player has to carry the ball from the starting point to the end point. The fun part is that each mini game is a small browser window. When the ball reaches the destination point of that mini game, it is transferred into the newly created mini game browser to continue the journey. The following screenshot shows the whole map of Twitch with the individual web browsers:

Thanks to the new features of HTML5 and CSS3, we can now create an entire game in the browser. We can control every element in the DOM. We can animate each document object with CSS3. We have Canvas to dynamically draw things and interact with them. We have an audio element to handle the background music and sound effects. We also have Local Storage to save game data, and WebSocket to create a real-time multiplayer game. Most modern browsers are already supporting these features. It is now time to build HTML5 games.

Coca-Cola had run a campaign known as Ahh (http://ahh.com) with lots of interactive mini games. The interactions combined several techniques that included canvas and device rotation. Most of them work well in both desktop and mobile devices.

Erik, a web designer from Sweden, created an interesting bookmarklet. This is an asteroid-styled game for any web page. Yes, any web page! It shows an abnormal way to interact with any web page. It creates a plane on the website you are reading from. You can then fly the plane using arrow keys and fire bullets using the space bar. The fun part is that the bullets will destroy the HTML elements on the page. Your goal is to destroy all the things on the web page that you choose. This bookmarklet is another example of breaking the boundary of usual browser games. It tells us that we can think outside the box while designing HTML5 games.

The following screenshot shows the plane destroying the contents on the web page:

The bookmarklet is available for installation at http://kickassapp.com. You can even design the space ship that you control.

The creator of a Canvas-based game engine named Impact, created this X-Type (http://phoboslab.org/xtype/) shooting game for different platforms, including web browsers, iOS, and Wii U. The following screenshot shows the game running smoothly in iPhone.

Cursors.io (http://cursors.io) demonstrates a nicely designed real-time multiplayer game. Every user controls an anonymous mouse cursor and takes a journey through the levels of the game by moving the cursor to the green exit. The fun part of the game is that players must help the others to advance to the level. There are toggles that some cursors click on them to unlock the doors. The anonymous players must take up the role to help the others. Someone will take your role so that you can advance to the next level. The more players that help you, the higher your chance is to succeed in the game. In case only a few players are playing and you can't experience the game, I have recorded my playing screen in 12 x speed (at http://vimeo.com/109414542) to let you have a glimpse of how this multiplayer game works. This has been captured in the following screenshot: