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

Video Manipulations and Delivery for Angular Video Apps

On social media, videos posted by users constitute a significant amount of the content appeal on those platforms. From upload to manipulation to delivery, a smooth, efficient, and effective pipeline for the posting process is mandatory to ensure consistent user sessions and their steadily increasing volume. However, building such an infrastructure is a complex, labor-intensive, and problem-prone undertaking.

Read more
Green Screen Queen: Dynamic Video Transparency Fit For Royalty

If you were reading your social media or news feeds on or around June 11 this year, no doubt you came across your fair share of posts about Queen Elizabeth and her outfit-color faux pas. For her 90th birthday, she chose a solid neon green suit, and it didn't take long for Photoshop fanatics to suggest alternative designs for the Queen's green-screen threads.

Read more
Content-Aware Automatic Cropping for Video

Delivering videos according to the aspect ratios defined by social media for multiple devices and platforms is a growing challenge. The continuously rising volume of vertical videos and the corresponding increase in video traffic on mobile devices (now up to 57% of online videos watched) have only exacerbated the situation, with no letup in sight.

Read more
Use a custom function in the image delivery pipeline

Cloudinary offers a wide array of image manipulations and effects to apply to images as part of our image-processing pipeline, helping to ensure that your images fit the graphic design of your website or mobile application. Cloudinary is an open platform, and you can use our APIs, Widgets and UI to build the media management flow that matches your needs.

Read more
OpenText™ TeamSite – Cloudinary Plugin

Tired of depending on other teams or software to create assets in multiple sizes for your responsive web site?

Does importing asset files into TeamSite slow down your web content publishing?

Klish Group is pleased to introduce the OpenText TM TeamSite – Cloudinary connector. Customers of the OpenText TM TeamSite web content management platform can now browse and select images in the same way they always have. Authors can just browse and select the image they want to use and Cloudinary will automatically deliver it in the optimal format and quality to the customer requesting it.

Read more