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

An Eye-Opening Talk: Building Apps for the Next Billion Users in Africa

William (iChuloo) Imoh, who hails from Lagos, Nigeria, recently embarked on a U.S. speaking tour, February 20-March 12, during which he powwowed with technical and product teams and communities at such renowned enterprises as Netlify, Pluralsight, Lucidchart, Twilio, and more in Salt Lake City, Dallas, Las Vegas, and San Francisco. On March 5, he gave an enlightening talk, entitled International Developers and Development: Building for the Next Billion Users at Cloudinary in Santa Clara, California. Below is a synopsis. For details, see the related slides.

Read more
The Debut of the Cloudinary Customer Advisory Board

Focus on customers has always been Cloudinary’s mantra. Because we owe them our success, we are constantly reaching out to our customers, not just for feedback on our offerings, but also for their vision, wish list, and buy-in of what Cloudinary can do to meet their needs and make them succeed. About six months ago, it occurred to us that it would be beneficial if we could meet regularly with those who are behind innovation at our key customers—executives, product gurus, developers, content managers—to swap strategies, product roadmaps, best practices, and such. In particular, we’d like to solicit actionable feedback as a foundation for our plans of product enhancements.

Read more
Media Management With the Cloudinary-Netlify CMS Integration

Static sites and the JAMstack are quickly becoming a standard for developing safe and performant websites with an optimal workflow for developers. Netlify CMS (not to be confused with the company that created it, Netlify) is an open source content management solution that works especially with static site generators such as Gatsby, Hugo, etc... enabling content storage in your Git repository along with your code for easier versioning, multichannel publishing, and direct content updates in Git.

Read more
Vitaly Friedman's Insights on Media Conferences

Vitaly Friedman is a die-hard devotee of beautiful content. Born in Minsk, Belarus, he studied Computer Science and Mathematics in Germany, unearthing in himself a passion for typography, writing, and design in the interim. After a six-year stint as a freelance designer and developer, he co-founded Smashing Magazine, a leading online publication on web design and development. You can follow SmashingMag on Twitter @SmashingMag.

Read more