HTML5 Animation Tutorial - Animating Elements with CSS3

Udemy Editor

With the release of HTML5 and CSS3, the humble group of “display languages” have been transformed into a powerful set of tools to create interactive, dynamic and responsive websites. Animation using HTML5 and CSS3 for example, has transformed the way developers can code and create great animations that load quickly and play easily. This HTML5 animation tutorial will show you how to animate divisions using style and formatting tags to create animated divisions in your web pages.

If you want to learn how to create your own powerful websites from scratch using HTML5 and CSS3, check out the the Web Development by Doing HTML5 CSS3 Complete from Scratch course now. This course contains 49 lectures designed to teach you to create your own complete website from start to finish. You will learn what a website is and what elements are required for a complete website. You will be taught the basics of HTML and HTML5 and then the course will teach you advanced HTML5 to ensure you understand how to take advantage of the powerful features available in HTML5. The course also covers CSS and CSS3 and how CSS3 can help you to build a stunning looking website that responds to various browsers and devices.

There are many ways of animating elements using HTML5. The canvas option in HTML5 for example, gives developers the ability to create and draw elements on a webpage and to use scripting languages like JavaScript to animate those images. For a complete HTML5 animation tutorial on how to use the canvas element, feel free to read, “The HTML5 Canvas Animation Allows You to Program Animations For Your Website”.

This tutorial will focus on the CSS animations available in HTML5 using the webkit-animation tag. Here are the steps we will use to animate in HTML5 using CSS:

· Step 1: Create the HTML5 document

· Step 2: Adding Style elements to the header section

· Step 3: Animating the elements

Step 1 – Creating Your HTML5 Document

Creating an HTML5 web page is as simple as declaring that the page is an HTML5 page at the start of the page. The DOCTYPE tag at the start of a page tells the browser that the page may contain HTML5 tags that will be used in the styling of the document. Here is the code we will use to create the essential elements of our HTML5 page:

<!DOCTYPE html><html><head></head><body><div>Hello</div>
</body>
</html>

We will be adding various style elements to the head section of the page to create the animation and then we will create the body of the page and include a division to create the styled element on the page. For a tutorial on basic HTML5, feel free to read “HTML5 Tutorial – Web Design for Beginners and Freshers.”

Step 2 – How Add Style Elements to the Page

We are going to create a division called myAnim to create the element we will animate. To create the style sheet for this element, we need to add the style to the header of the page or if you prefer, you can add it to a linked CSS style sheet.

For the purposes of this tutorial we will create a simple square for animation purposes, but there are a number of different shapes you can create using CSS3.

Take a look at the code below:

<!DOCTYPE html><html><head><style>.myAnim{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in certain browser versions.</p>
<div class="myAnim"></div>
</body>
</html>

The .myAnim sets the style for the element in the header section and also draws the element using CSS. The class is then set in the main page using the <div class=”myAnim”> tag.

This is what the code looks like:

<div class="myAnim"></div>

If you would like to learn how to code using HTML5 and CSS3, then sign up for the Responsive Web Design with HTML5 and CSS3 – Introduction course now. This course offers 82 lectures designed to teach students to create a website from scratch using HTML5 and CSS3. You will learn basic HTML and CSS and by the end of the course, you will be able to implement advanced CSS techniques that you can use in a web page that will work on all modern browsers.

Step 3 – How Animate the Style Elements on Your Page

Now that we have an element, it is time to animate those elements. You can animate almost any attribute of the elements you create. You can change colors, adjust rotation, resize the element and much, much more.

Before we add animation to our element, you need to be aware of the fact that different browsers require different tags for the animation of CSS elements. The process of writing different tags for different browsers can become a little laborious but unfortunately, it has to be done at this time. Hopefully, these tags will be standardized in the near future but for now, we need to write three sets of code for the same animation to ensure the animation works across various browsers.

Let’s start by changing the color of the square we created. Look at the following code:

<!DOCTYPE html><html><head><style>.myAnim{
width:100px;
height:100px;
background:red;
-webkit-animation:myfirst 5s; /* Chrome, Safari, Opera */
animation:myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
/* Standard syntax */
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in certain browser versions.</p>
<div class="myAnim"></div>
</body>
</html>

We create the animation using the following code:

-webkit-animation:myfirst 5s; /* Chrome, Safari, Opera */
animation:myfirst 5s;
Then we use this code to change the color:
@-webkit-keyframes myfirst {
from {background:red;}
to {background:yellow;}
}

The result is a square that changes color from red to yellow.

Animations can include single transitions or multiple transitions using the percentage attribute for animations.

Take a look at the following code:

<!DOCTYPE html><html><head><style>.myAnim{
width:100px;
height:100px;
background:red;
position:relative;
/* Chrome, Safari, Opera */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
/* Standard syntax */
animation-name:myfirst;
animation-duration:5s;
animation-iteration-count:infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:pink; left:150px; top:0px;}
50% {background:blue; left: 150px; top: 150px;}
75% {background:purple; left:0px; top: 150px;}
100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:pink; left: 150px; top:0px;}
50% {background:blue; left: 150px; top: 150px;}
75% {background:purple; left:0px; top: 150px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="myAnim"></div>
</body>
</html>

The above code uses the percentage element to create animations. The result of the above code is a square that changes color and moves around as well. You can add as many percentage elements as you would like and you can also add as many attributes as you would like to transform.

HTML5 Animation Tutorial – Create Your Own Today

HTML5 and CSS3 offer powerful ways to create animations for your websites that load quickly and that can be displayed on a host of different devices. If you would like to learn to harness the power of the new HTML5 and CSS3 for your websites, enroll in HTML5 + CSS3 Responsive Web Design. This course contain 119 lessons to take you through the step-by-step process of creating 3 beautiful websites. The websites will be 100% responsive and display beautifully on any device being used to view them. The course will show you how to build a wireframe design using Adobe Illustrator. You will learn all about CSS3’s media queries to target various different devices and resolutions. You will learn how to extract Photoshop content and how to turn that content into stunning designs for your website. You will also learn to control those designs using a number of different CSS3 techniques.