Cloudinary Blog

HTML5 Animations Tutorial with 10 Beautiful Examples

HTML5 Animations Tutorial With Beautiful Examples

HTML5 is the latest evolution of the HTML standard. It is bundled with a lot of new elements and attributes that makes semantics, connectivity, performance, device access, 2D/3D graphics, animation and styling better on the web.

With HTML5, animations can now be programmed in the browser. Users get to enjoy all sorts of animations powered by HTML5, CSS3 and JavaScript. Apart from providing elements, such as the video and audio tag, the canvas element is a part of HTML5 that enables building games and powerful animations.

Before we dive into how the HTML5 canvas element enables us to produce several types of animations, let’s take a look at how companion technologies -- CSS3 and JavaScript -- makes animations possible with some examples on the browser.

CSS3 Animation

CSS3 ships with the transformation and animation properties. The transition property tells the browser to compute intermediate frames between two states. There are about 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, the animation-duration property must always be specified.

In addition, it ships with keyframes, which is the foundation of CSS animations. Keyframes actually define what the animation looks like at each stage of its timeline. Keyframes and animation go hand in hand. Check out this example.

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

The animation name is SkrrrPapaPum, but then we define how the animation should look like with keyframes like so:

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

You have the freedom to define your own style of animation using whatever properties within the keyframes scope.

Let’s take a look at some cool CSS3 animation examples.

  1. Rain The only HTML5 element used is the <section> element. 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, and the directions are specified using the keyframes property.

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

    The JavaScript as shown in the codepen above in collaboration of the CSS properties enable the creation of raindrops.

  2. Packman

    This Packman example by Kseso involves no JavaScript at all. Just plain HTML5 and CSS3. However, the example makes heavy use of the animation and keyframes properties to make a great HTML5 animation example.

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

  3. Twisty

    We are all quite familiar with the twisty animations. These are cool because after focusing your eyes on them you can see the same movement when looking away. In this particular twisty example, the CSS3 animation property has been put 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 property are the key players in this example. The square is made to rotate 360 degrees and the duration of the animation specified to be 10 seconds, and it continually repeats itself.

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

HTML5 Canvas Animations

The HTML5 Canvas element is used to draw graphics on the screen with the aid of JavaScript. A simple HTML5 canvas markup can be like so:

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

And then you must use JavaScript to draw any type of shape and animations you want to achieve. A simple shape can be drawn on the canvas like so:

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

The animation model of our solar system crafted by the guys at MDN can be shown below:

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

Now, let’s take a look at some cool and mind-blowing HTML5 Canvas animation examples.

  1. Canvas Waterfall

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

    Take a look at the JavaScript code in the codepen example above. There are a lot of computations going on. 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 requestAnimationFrame and cancelAnimationFrame API.

    The requestAnimationFrame method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs.

    Therefore, when creating animations, use this method 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 an 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 the user, requestAnimationFrame will make the animations stop.

    Check out another animation demo with requestAnimationFrame.

  2. Tearable Cloth

    I’m still in awe of this tearable cloth animation demo that was created with HTML5 Canvas and JavaScript. The demo allows a user to right-click and drag their mouse to tear the cloth. Check it out below:

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

    Note: The requestAnimationFrame method I mentioned earlier was used here.

  3. Particles

    This demo reflects several multi-colored bubbling particles. The animation was created on the canvas element.

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

  4. Real World Lightning Effect

    The power of HTML5 Canvas and JavaScript in producing real world lightning effect animation. Check out the source code. Very easy to understand.

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

SVG Animations

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

SVG is resolution-independent and best suited for applications with large rendering areas, such as Google Maps. It is not suited for game applications. However, Canvas is resolution dependent. It has no support for event handlers and the text rendering capabilities are poor. Canvas is great for graphic-intensive games.

  1. Become a Traveller Today

    This is an amazing SVG animation created using SVG and CSS. The CSS animation properties were very useful in ensuring it is as good as it looks and moves.

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

  2. Breaking Bad

    Breaking Bad series fans, this 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 HTML5 animations demo of an astronaut ascending into space. SVG, CSS and JavaScript.

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

Conclusion

Before now, Flash was heavily used to make animations on the web. But it was expensive to develop and deploy animations to the web. Now, HTML5 makes animations easily accessible and powerful. As we saw in the HTML5 animations examples above, you can create very brilliant animations with the help of HTML5, CSS3 and JavaScript.

Go forth and animate!

Recent Blog Posts

10 Website Videos Mistakes and How to Solve Them

It should come as no surprise that video use on the internet is exploding. You can see the dramatic growth of video on the average site in this SpeedCurve blog post.

With the growth in video comes greater bandwidth use, which is not only costly for your IT budget, but for your visitors as well. Beyond the expense, there is the user experience to consider. The heavier the page, the longer it will take to load, and the greater likelihood visitors will abandon your site. Page load speed is also an important factor in SEO ranking, so clearly video is something we need to take seriously and get right. Video is challenging, presenting terms still unfamiliar to developers - like codecs, bitrate and adaptive bitrate streaming. As a result, mistakes are being made in video implementation.

Read more
Android Data Saver: Optimizing Mobile Data Usage with Cloudinary

Over the life of a mobile device, the cost of a cellular data plan often exceeds that of the device itself. To optimize data usage and purge useless data on their mobile devices, users can enable Data Saver from Android 7.0 (API level 24). To do so, users toggle Data Saver in quick settings under the Notification shade or under Settings > Data usage. With Data Saver enabled, apps that aren't whitelisted cannot use cellular data in the background. They are also directed to consume less data while active.

Read more
Introducing the Cloudinary Upload Widget v2

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals. Cloudinary is an end-to-end solution for all your image and video needs, including upload, storage, administration, manipulation, optimization and dynamic delivery.

Read more
Convert an Image to a 3D Canvas With Cloudinary

Note
This post was cowritten with Daniel Mendoza.
Note
This post was cowritten with Daniel Mendoza.
Note

Famed American poet Henry David Thoreau once said, “This world is but a canvas to our imagination.” And, like your imagination, the transformations you can apply to images with Cloudinary are practically endless. You can even render any flat image to appear three-dimensional and framed on a canvas.

Read more
Mobile Optimization: Optimize Your Mobile-Web User Experience

TL;DR

We live in a visual world, often while on the go, and consumers expect media-rich web content. Accordingly, the loading speed of images and videos is a big factor in user experience. To optimize customer satisfaction with your mobile content, you must focus on the quality, format, and size of your digital assets. With Cloudinary, optimization is simple, not only enhancing your mobile web and app performance, but also upping your SEO game and boosting customer experience.

Read more