6.1. Adding Lightweight Animations and Native-Like Layouts

One of the big differences between native and web applications is that web applications often lack the great-looking user interfaces that native apps can offer. The good news is that technologies like HTML5, CSS3, and JavaScript can now offer solutions that compete with native technologies—for example, providing native browser animation features and ensuring that specific visual elements have a fixed position, such as a top bar menu.

One of these new technologies, CSS3, adds a lot of improvements, including shadows, rotations, and gradients. But for this part we will focus on two very interesting features: CSS transitions and CSS animations.