Cloudinary Blog

A Tutorial of HTML5 Animations With 10 Beautiful Examples

10 Beautiful HTML5 Animation 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.

    body {
    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%);
    .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%);
    position: absolute;
    -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;

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

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

  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");

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.


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

Converting Videos to GIFs in Kotlin-Based Android Apps

Among the image formats available today, Graphics Interchange Format (GIF) works for both static and animated images. A popular use of GIF images—commonly called GIFs—is to repeatedly loop motions, which you cannot in real life. Many people have turned themselves into online celebrities through effective application of GIFs.

Read more
Simple Steps to Make Your Site Accessible With Cloudinary

Web accessibility (a11y) is about gaining an insight into—

It’s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, if your audience can't use your app with ease and confidence, then it’s not accessible enough and the user experience is not good enough.

Read more
Learn three ways in which to tell appealing stories on video.

Video storytelling is one of the most effective means of conveying messages to your audience. It’s also a popular marketing tool because most people are automatically drawn to video. In eCommerce, if accompanied by attractive images and a compelling narrative, video storytelling uniquely connect with potential customers without fail.

Read more