CSS3 Animation

Exclusive offer: get 50% off this eBook here
HTML5 and CSS3 Transition, Transformation, and Animation

HTML5 and CSS3 Transition, Transformation, and Animation — Save 50%

A handy guide to understanding Microdata, the new JavaScript APIs, and the new form elements in HTML5 and CSS3 along with transition, transformation, and animation using lucid code samples with this book and ebook

$20.99    $10.50
by Aravind Shenoy Gianluca Guarini | November 2013 | Open Source Web Development

This article by Aravind Shenoy and Gianluca Guarini, the authors of the book HTML5 and CSS3 Transition, Transformation, and Animation, have discussed about CSS3 animations used in todays websites.

(For more resources related to this topic, see here.)

The websites, we see today, are complex and complicated. By complex and complicated, we are referring to the development of these websites and not the webpage itself. We see animations and complex features. Prior to HTML5 and CSS3, JavaScript was used extensively for this purpose. HTML was incorrectly used for styling when it was expected to design the structural markup of the page. However, with the advent of CSS, it is a good practice to use HTML for markup and CSS for styling. CSS3 brings along transforms, transition elements, and animation features that make it easier to develop awesome features.

In transition, we can view the change from a single state to other but when it comes to multiple states, Animation is the solution.

Let's discuss the various properties of CSS3 Animations and then we will incorporate all of that in a code to understand it better.

@keyframes

The points at which the transition should take place can be defined using the @keyframes property. As of now, we need to add a vendor prefix to the @keyframes property as it is still in its development state. In future, when it is accepted as a standard, then we do not have to use a vendor prefix. We can use percentage or from and to keywords to implement the change in state from one CSS style to another.

animation-name

We need to apply animation to an element. This property enables us to do so by applying it to the animation name defined in the keyframes rule. However, it cannot be a standalone property and has to be used in conjunction with other animation properties.

animation-duration

Using this feature, we can define the duration of the animation. If we specify the animation-duration to 5 seconds, changes in the CSS defined states will need to be completed within 5 seconds.

animation-delay

Similar to the delay property in transition, the delay feature will delay the animation by the time period specified.

animation-timing-function

Similar to the timing function, this property decides the speed of transition. It behaves the same way as the transition timing function that we have seen earlier.

animation-iteration-count

We can decide the number of iteration carried out in the animation phase using this property. Setting this property to infinite will mean that the animation will never stop.

animation-direction

We can decide the direction of the animation using this property. We can use values like reverse, alternate to define the direction of the element to be animated.

animation-play-state

Using this feature, we can determine whether the animation would be running or paused accordingly.

Now that we had a look at these properties, we will now incorporate some of these properties in a code and understand the functionality in a better way. Hence, to gain a practical insight, let's look at the following code.

<!DOCTYPE html> <html> <head> <style> body { background:#000; color:#fff; } #trigger { width:100px; height:100px; position:absolute; top:50%; margin:-50px 0 0 -50px; left:50%; background: black; border-radius:50px; /*set the animation*/ /*[animation name] [animation duration] [animation timing function] [animation delay] [animation iterations count] [animation direction]*/ animation: glowness 5s linear 0s 5 alternate; -moz-animation: glowness 5s linear 0s 5 alternate; /* Firefox */ -webkit-animation: glowness 5s linear 0s 5 alternate; /* Safari and Chrome */ -o-animation: glowness 5s linear 0s 5 alternate; /* Opera */ -ms-animation: glowness 5s linear 0s 5 alternate; /* IE10 */ } #trigger:hover { animation-play-state: paused; -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; } /*animation keyframes*/ @keyframes glowness { 0% {box-shadow: 0 0 80px orange;} 25% {box-shadow: 0 0 150px red;} 50% {box-shadow: 0 0 70px pink;} 75% {box-shadow: 0 0 50px violet;} 100% {box-shadow: 0 0 100px yellow;} } @-moz-keyframes glowness /* Firefox */ { 0% {box-shadow: 0 0 80px orange;} 25% {box-shadow: 0 0 150px red;} 50% {box-shadow: 0 0 70px pink;} 75% {box-shadow: 0 0 50px violet;} 100% {box-shadow: 0 0 100px yellow;} } @-webkit-keyframes glowness /* Safari and Chrome */ { 0% {box-shadow: 0 0 80px orange;} 25% {box-shadow: 0 0 150px red;} 50% {box-shadow: 0 0 70px pink;} 75% {box-shadow: 0 0 50px violet;} 100% {box-shadow: 0 0 100px yellow;} } @-o-keyframes glowness /* Opera */ { 0% {box-shadow: 0 0 80px orange;} 25% {box-shadow: 0 0 150px red;} 50% {box-shadow: 0 0 70px pink;} 75% {box-shadow: 0 0 50px violet;} 100% {box-shadow: 0 0 100px yellow;} } @-ms-keyframes glowness /* IE10 */ { 0% {box-shadow: 0 0 20px green;} 25% {box-shadow: 0 0 150px red;} 50% {box-shadow: 0 0 70px pink;} 75% {box-shadow: 0 0 50px violet;} 100% {box-shadow: 0 0 100px yellow;} } </style> <script> // animation started (buggy on firefox) $('#trigger').on('animationstart mozanimationstart webkitAnimationStart oAnimationStart msanimationstart',function() { $('p').html('animation started'); }) // animation paused $('#trigger').on('mouseover',function(){ $('p').html('animation paused'); }) // animation re-started $('#trigger').on('mouseout',function(){ $('p').html('animation re-started'); }) // animation ended $('#trigger').on('animationend mozanimationend webkitAnimationEnd oAnimationEnd msanimationend',function() { $('p').html('animation ended'); }) //iteration count var i =0; $('#trigger').on('animationiteration mozanimationiteration webkitAnimationIteration oAnimationIteration msanimationiteration', function() { i++; $('p').html('animation iteration='+i); }) </script> </head> <body> <div id="trigger"></div> </body> </html>

The output of the code on execution would be as follows:

We have used –webkit as the prefix in this example as we are executing the code in Google Chrome. Please us –moz prefix for Firefox and –o- for Opera. Comments are added in the code so that we can understand it easily.

Apart from HTML5 and CSS3, we have used a bit of JQuery. Let’s go through the animation part of the code to understand it better. In the CSS3 styles, we have mentioned the animation direction as alternate as a result of which the animation would be in a different direction after the first iteration.

We have used the hover property. In this code, whenever we hover over the object, the animation is paused. We have also defined the glowness of the object in keyframes. We have also mentioned how the colors change and defined a box-shadow attribute for the animation in keyframes.

We have defined the <script> tag in which we have included the JavaScript and JQuery code.

We have used the trigger attribute. The trigger() method triggers a particular event and the default behavior of an event with regards to the chosen elements. We have used mouseover and mouseout properties. The mouseover and mouseout event fires when the user moves the mouse pointer over an element and out of an element respectively. We have used those events in conjunction with the start, end and pausing of the animation. Therefore, we can create complex animations using CSS3.

Coding is an art which gets better with practice. Hence, we need to implement it practically in order to know the subtle nuances of HTML5 and CSS3. However, we can achieve that after a considerable amount of practice.

However, we are just on the shore; the sea of knowledge is far beyond.

In this article, we have covered a lot of HTML5 and CSS3 features. Instead of wading through loads of theory, the concepts in this article 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 article.

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.

Click on the following link to have a look at the book:

http://www.packtpub.com/html5-and-css3-for-transition-transformation-animation/book

Summary

This article has discussed how HTML5 and CSS3 features can be used used in websites. There is a detailed discussion on the animations used in the websites offered by CSS3.

Resources for Article:


Further resources on this subject:


HTML5 and CSS3 Transition, Transformation, and Animation A handy guide to understanding Microdata, the new JavaScript APIs, and the new form elements in HTML5 and CSS3 along with transition, transformation, and animation using lucid code samples with this book and ebook
Published: November 2013
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


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 HTML.it 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 gianluca.guarini@gmail.com and https://github.com/GianlucaGuarini.

Books From Packt


Instant Migration to HTML5 and CSS3 How-to [Instant]
Instant Migration to HTML5 and CSS3 How-to [Instant]

 Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

Developing Windows Store Apps with HTML5 and JavaScript
Developing Windows Store Apps with HTML5 and JavaScript

HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

 Mobile First Design with HTML5 and CSS3
Mobile First Design with HTML5 and CSS3


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
X
P
w
Y
y
i
Enter the code without spaces and pay attention to upper/lower case.
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
Resources
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