6 min read

(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:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here