HTML5 and CSS3 Transition, Transformation, and Animation

HTML5 and CSS3 Transition, Transformation, and Animation
eBook: $20.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $55.98    Print cover: $34.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Discover the semantics of HTML5 and Microdata
  • Understand the concept of the CSS3 Flexible Box model
  • Explore the main features of HTML5 such as canvas, offline web application, geolocation, audio and video elements, and web storage
  • Master the tools and utilities in HTML5 and CSS3

Book Details

Language : English
Paperback : 136 pages [ 235mm x 191mm ]
Release Date : November 2013
ISBN : 1849519943
ISBN 13 : 9781849519946
Author(s) : Aravind Shenoy, Gianluca Guarini
Topics and Technologies : All Books, Web Development, Open Source

Table of Contents

Chapter 1: Introduction to HTML5
Chapter 2: Using the New Markup to Build a Semantic Page
Chapter 3: Flexible Box Model in CSS3
Chapter 4: Web Forms in HTML5
Chapter 5: Advanced Features of HTML5
Chapter 6: CSS3 Animations
Chapter 7: Tools and Utilities in HTML5 and CSS3
        • Chapter 4: Web Forms in HTML5
          • New form attributes in HTML5
            • placeholder
            • autofocus
            • required
            • datalist
          • Understanding new input types in HTML5
            • search
            • email and url
            • date
            • week
            • month
            • color
          • Summary
          • Chapter 5: Advanced Features of HTML5
            • Audio and video
            • Drag-and-Drop
            • Geolocation
            • Webstorage
              • sessionStorage
              • localStorage
            • Offline web applications
            • Canvas
              • beginPath
              • closePath
              • moveTo
              • stroke and fill
              • arc
              • lineTo
              • Gradients
              • save and restore
              • Transformations
                • translate
                • rotate
                • scale
              • Animation
            • Summary
            • Chapter 6: CSS3 Animations
              • CSS3 transitions
                • The transition-duration property
                • The transition-timing-function property
                • The transition-delay property
              • CSS3 transforms
                • rotate
                • scale
                • translate
                • skew
                • translate (3D)
                • rotate (3D)
                • preserve-3d
              • CSS3 animation
                • @keyframes
                • animation-name
                • animation-duration
                • animation-delay
                • animation-timing-function
                • animation-iteration-count
                • animation-direction
                • animation-play-state
              • Summary

                Aravind Shenoy

                Aravind Shenoy is an in-house author at Packt Publishing. An engineering graduate from the Manipal Institute of Technology, his core interests are technical writing, web designing, and software testing. He is a native of Mumbai, India, and currently resides there. He has written books such as An overview on Apache Hadoop, JavaScript: Web Designing Fundamentals, and CSS Essentials in a Nutshell and articles on various technologies.

                Gianluca Guarini

                Gianluca Guarini is a 25-year-old web developer, with strong design skills, working currently in Zurich. He was born in Avellino, a sunny city in the south of Italy, and he grew up designing things and playing video games from an early age on a Commodore 64. He graduated in Psychology of Communication in Milan and has worked collaborating with small web agencies as a freelancer, always searching for new projects to enhance his skills. In 2011, he wrote an HTML5 guide for the biggest Italian web design e-learning portal and in the same year he started a long collaboration with Radio Deejay pushing the HTML5 technology into the mainstream in Italy thanks to an amazing working group. He won, with Radio Deejay team, the first prize for the best Design/UX in Dev Unplugged (an HTML5 contest for the launch of Internet Explorer 9) realizing The Visual Player, an amazing project that combines the use of HTML5 Canvas, Video, Audio, and SVG features. In 2012, he moved to Zurich to work as frontend developer for Gold Interactive, then a brand-new web agency that likes to start any new project always by exploiting the coolest HTML5 features needed to make them unique and great. He believes in open source and is always sharing his tricky codes on Twitter from his account @gianlucaguarini. You can contact him at and
                Sorry, we don't have any reviews for this title yet.

                Code Downloads

                Download the code and support files for this book.

                Submit Errata

                Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                - 2 submitted: last submission 19 Mar 2014

                Errata type: Typo   Page number: 3 (Credits page)

                The title, Acquisition Editor, should be Acquisition Editors

                Errata type: Code | Page number: 76

                The code snippet on the page should be:

                <!DOCTYPE HTML>
                <script type="text/javascript">
                function saverestoreDemo(){
                  var canvas = document.getElementById('packt');
                    var ctx = canvas.getContext('2d');
                     ctx.fillStyle = 'lime'       
                     ctx.globalAlpha = 0.5;    
                          // Restore the saved rectangle         
                <body onload="saverestoreDemo();">
                   <canvas id="packt"></canvas>

                Sample chapters

                You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                Frequently bought together

                HTML5 and CSS3 Transition, Transformation, and Animation +    Mastering Web Application Development with AngularJS =
                50% Off
                the second eBook
                Price for both: £21.45

                Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                What you will learn from this book

                • Use Microdata for SEO purposes and learn the semantics of HTML5
                • Learn about the new HTML5 form elements
                • Work with drag-and-drop in HTML5
                • Discover how geolocation works in different browsers
                • Master HTML5 canvas theory with lots of code samples
                • Understand how offline web application works and learn about web storage concepts
                • Get acquainted with the nuances of CSS3 transition
                • Create complex web pages using advanced animations

                In Detail

                HTML5 and CSS3 are the way for the future. Prior to HTML5 and CSS3, it was difficult to design complicated animations and transformations. With the advent of HTML5 and CSS3, web design has become much simpler, and the new features that are now available help us design complex web pages with ease. These cool new features will be the standard for the future; hence, it is imperative to learn about them now.

                HTML5 and CSS3 Transition, Transformation, and Animation will help you take advantage of the real power behind HTML5 and CSS3 and will give you a good grounding for using it in your own web pages. Each and every code sample and concept is explained in detail, and you will be provided with all the information you need to take your web pages to the next level – before all your competitors do!

                The book starts by covering the basic concepts of HTML5 and CSS3 such as semantics, Microdata, and the Flexbox model. You will then quickly progress to intermediate concepts such as form elements and some exciting features with JavaScript APIs. The code samples provided in this book will give you a solid base by which you will then be able to understand, write, and execute your own HTML/CSS projects with transition and animations.

                Instead of wading through loads of theory, the concepts in this book are explained in a practical manner using code samples to demonstrate the new features of HTML5 and CSS3. The code samples are such that you can copy the code (the entire code is written instead of code snippets) and execute it for better understanding. Transition, transformation, and animation are also explained in a lucid manner, and there is a gradual increase in the difficulty level throughout the book.

                By the end of the book, you will be thoroughly acquainted with HTML5 and CSS3, enabling you to design a web page using the included code samples with ease.


                This book is a practical, hands-on guide that provides you with a number of clear, step-by-step exercises moving from a basic level of understanding of HTML5 and CSS3 and gradually progressing to more advanced concepts.

                Who this book is for

                HTML5 and CSS3 Transition, Transformation, and Animation is ideal for beginners as well as experienced web designers who want to learn HTML5 and CSS3 concepts. It will serve as a useful guide if you are new to the HTML5 and CSS3 standards and you are looking to build a solid foundation for using the new format. Basic knowledge of HTML and CSS is expected.

                Code Download and Errata
                Packt Anytime, Anywhere
                Register Books
                Print Upgrades
                eBook Downloads
                Video Support
                Contact Us
                Awards Voting Nominations Previous Winners
                Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software