Cloudinary Blog

A Tutorial of HTML5 Animations With 10 Beautiful Examples

A Tutorial of HTML5 Animations With Beautiful Examples

HTML5 is the latest HTML standard. It is bundled with numerous new elements and attributes that enhance semantics, connectivity, performance, device access, 2D and 3D graphics, animation, and styling on the web.

With HTML5, animations can now be programmed in the browser. Afterwards, viewers get to enjoy all sorts of animations powered by HTML5, CSS3, and JavaScript. Apart from such elements as the <video> and <audio> tags, HTML5 also offers the <canvas> element, which enables game building and creation of eye-catching animations.

Before showing you how to produce animations with the HTML5 canvas element, we’ll explain how two companion technologies—CSS3 and JavaScript—make animations possible in the browser, along with examples.

CSS3 Animations

CSS3 ships with the transformation and animation properties. The transformation property tells the browser to compute intermediate frames between two states. Altogether, there are eight animation properties, namely:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

To make the animations play, specify the animation-duration property.

In addition, CSS3 ships with keyframes, the foundation of CSS animations. keyframes and animation go hand in hand, with keyframes defining what the animation looks like at each stage of its timeline. Check out this example:

div {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: SkrrrPaPaPum;
  animation-name: SkrrrPapaPum;
}

Here, the animation name (as specified by animation-name) is SkrrrPapaPum, but we also define how the animation looks with keyframes, like this:

@keyframes SkrrrPapaPum {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

Feel free to define your own style of animation by specifying whatever properties are appropriate within the keyframes scope.

Below are three awesome examples of animation with CSS3.

  1. Rain The only HTML5 element used here is <section>`. Peek through the CSS.

    html{height:100%;}
    body {
    background:#0D343A;
    background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000)  );
    background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);
    overflow:hidden;}
    .drop {
    background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
    background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width:1px;
    height:89px;
    position: absolute;
    bottom:200px;
    -webkit-animation: fall .63s linear infinite;
    -moz-animation: fall .63s linear infinite;
    }
    /* animate the drops*/
    @-webkit-keyframes fall {
    to {margin-top:900px;}
    }
    @-moz-keyframes fall {
    to {margin-top:900px;}
    }

    The raindrops are gradient forms of drops that are animated to fall within a certain duration. The keyframes property specifies the directions.

    See the Pen CSS RAIN by raichu26 (@alemesre) on CodePen.

    In collaboration with the CSS properties, the JavaScript in the above CodePen creates raindrops.

  2. Packman

    This Packman example by Kseso involves no JavaScript at all, only plain HTML5 and CSS3. However, the example makes heavy use of the animation and keyframes properties to create an outstanding HTML5 animation:

    See the Pen Packman by Kseso by Kseso (@Kseso) on CodePen.

  3. Twisty

    We are all familiar with the twisty animations. They are cool because, after focusing your eyes on them for a while, you can still see the same movement when you look away. In this particular example, we put the CSS3 animation property to work:

html {
  background: black;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.container{
  height: 300px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -150px;
}

.square{
  height: 94%;
  width: 94%;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -47% 0 0 -47%;
}

.black{ 
  background: black;  
  animation: rotate 10s infinite linear; 
}

@keyframes rotate{
  0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }  
}

The animation and @keyframes properties are the key players here. The square is made to rotate 360 degrees and the duration of the animation specified to be 10 seconds. The twisty animation continually repeats itself.

See the Pen Twisty by Mike King (@micjamking) on CodePen.

HTML5 Canvas Animations

The HTML5 canvas element draws graphics on the screen with the aid of JavaScript. Here’s a simple HTML5 canvas markup:

<canvas id="myCanvas" width="200" height="100"></canvas>

You must use JavaScript to draw the type of shape and animations you desire. For example, you can draw a simple shape with this code:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Here’s the animation model of the solar system crafted by the guys at MDN Web Docs::

See the Pen An animated solar system by Prosper Otemuyiwa (@unicodeveloper) on CodePen.

Now have a look at some supercool examples of HTML5 Canvas animation.

  1. Canvas Waterfall

    See the Pen Canvas Waterfall by Jack Rugile (@jackrugile) on CodePen.

    Note the JavaScript in the above CodePen. Many computations are in play, from checking if a canvas element exists to getting the 2D animation context to defining the logic for the transition of the waterfall particles to using the browser’s requestAnimationFrame and cancelAnimationFrame API.

    The requestAnimationFrame method accords you a smoother and more efficient way for building animation by calling the animation frame when the system is ready to paint it. The number of callbacks is usually 60 times per second and might be reduced when running in background tabs.

    Therefore, when creating animations, use requestAnimationFrame instead of setTimeout or setInterval for visual updates. The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update the animation before the next repaint. The method takes an argument as a callback to be invoked before the repaint.

    Paul Irish wrote extensively about requestAnimationFrame. If the page is not visible to users, requestAnimationFrame terminates the animation.

    Check out another animation demo with requestAnimationFrame.

  2. Tearable Cloth

    I’m in awe of this demo of tearable-cloth animation, which is created with HTML5 Canvas and JavaScript. By right-clicking the cloth and then dragging your mouse, you tear the cloth.

    See the Pen Tearable Cloth by dissimulate (@dissimulate) on CodePen.

    Note: The requestAnimationFrame method mentioned earlier is in use here.

  3. Particles

    This demo, created on the <canvas> element, shows several multicolored bubbling particles.

    See the Pen Particles by Elton Kamami (@eltonkamami) on CodePen.

  4. Real-World Lightning Effect

    The power of HTML5 Canvas and JavaScript are in full force here, producing an animation of real-world lightning effect. The source code is straightforward and intuitive.

    See the Pen Canvas Lightning WIP by Jack Rugile (@jackrugile) on CodePen.

Scalable Vector Graphics (SVG) Animations

The HTML5 <svg> element is a container for SVG graphics. SVG is XML based and you can attach JavaScript event handlers to the elements within <svg>. Because all modern browsers support rendering of SVG, you can reach a majority of users online without compatibility issues.

In addition, SVG is resolution independent and best suited for apps with large rendering areas, such as Google Maps. It’s not ideal for games. On the other hand, Canvas is resolution dependent. It does not work with event handlers and its text- rendering capabilities are poor. Nonetheless, Canvas is great for graphics-intensive games.

Below are three examples.

  1. Become a Traveller Today

    This amazing SVG animation leverages SVG and CSS. The CSS animation properties are instrumental in ensuring that the animation is as good as it looks and that it moves.

    See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.

  2. Breaking Bad

    Fans of the Breaking Bad series, this one is for you: a beautiful combination of SVG, Canvas, CSS, and JavaScript:

    See the Pen Breaking Bad by Tim Pietrusky (@TimPietrusky) on CodePen.

  3. Rainbow Rocket Man

    This is a demo of HTML5 animation that shows an astronaut ascending into space. SVG, CSS, and JavaScript are in play here.

    See the Pen SVG Rainbow Rocket Man by Chris Gannon (@chrisgannon) on CodePen.

Conclusion

Previously, web developers relied mostly on Flash to create and deploy animations on the web—an expensive undertaking. Now HTML5 makes animations both attractive and easily accessible. As shown by the HTML5 animations examples in this tutorial, you can create brilliant animations with HTML5, CSS3, and JavaScript.

Go forth and animate!

Recent Blog Posts

Cloudinary Product Gallery Enables Dynamic Buyer Experience

We live in a world where we spend increasingly more time online. As our routines change and adapt to new trends and technologies, we perform more and more of our daily activities in virtual environments. A key example of this is shopping. There are many reasons why online shopping has become so attractive for many buyers. A near endless variety of products is accessible from the palm of your hand. Customer reviews give buyers more confidence in their decisions. It's increasingly easy to search for attractive prices. And the list goes on. But a customer's desire to "touch" or "feel" the product is an interactive experience that can be hard to overcome when shopping online.

Read more
A Guide to Website Image Optimization and Performance

Part 1 of this series delves into the background for this guide. Here in part 2 are the ins and outs.

Wait, hear me out. I know, we just talked about this: Nobody is sheepishly pleading you, “Please, might we have just one more image on the page?” No, I’m not telling you to pick that particular fight. Instead, use a little smoke and mirrors to avoid requests for images that your audience needn’t render right away and might never need at all while loading them asynchronously—only as needed.

Read more
A Guide to Image Optimization for Website Performance

I’ve spent a lot of time thinking about the rules of putting images on the web.

For such a flexible medium as the web, software development can feel like a painstaking, rules-oriented game—an errant comma might break a build, a missing semicolon might wipe out an entire page. For a long time, the laws of image rendering seemed similarly cut-and-dry: For example, if your markups contained an img element , the singular content of its src attribute would be foisted on the audience regardless of their browsing context, period.

Read more
Digital Asset Management Platform: Meeting Customer Expectations

Consumers today expect media-rich experiences. No longer a novelty, it’s second nature to swipe through multiple photos on mobile apps, zoom in on product images for a closer look, visualize online travel reviews, socialize cool video clips while browsing, and encounter brand messages when walking into brick-and-mortar stores. These experiences weave together visual cues and clues with relevant content to create meaning and more authentic connections for customers.

Read more
How to Customize Cloudinary's eCommerce Android App

Recently we added the Cloudinary Demo - eCommerce App to the Google Play Store. This app demonstrates the best practices for optimal delivery of images on a storefront, including category pages, product pages, and a shopping cart. At the time, we published Introducing the Cloudinary Demo Android App, Part 1, which provided an under-the-hood tour of how the eCommerce Android App was designed and how Cloudinary was integrated throughout.

Read more