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

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more