How to Create a Sand Timer Animation Using HTML, CSS, and JavaScript

Ever wanted to create a visually engaging sand timer animation using only HTML, CSS, and JavaScript? Here’s a tutorial on how to build a simple and elegant sand timer animation. We’ll use CSS to handle all the animations, so no JavaScript is needed for this version. Let’s dive into the code and see how it all comes together.

Follow this video for complete guidance :

https://www.youtube.com/watch?v=z7H7OHs9xt4

Step 1: Setting Up the HTML Structure

The HTML structure is straightforward, consisting of a main container .sand-timer, which houses two glass sections (top and bottom) and a sand flow element. Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sand Timer Animation</title>
  <style>
    /* CSS Code */
  </style>
</head>
<body>
  <div class="sand-timer">
    <div class="glass top">
      <div class="sand"></div>
    </div>
    <div class="glass bottom">
      <div class="sand-fill"></div>
    </div>
    <div class="sand-flow"></div>
  </div>
</body>
</html>

In the HTML:

• The .sand-timer div is the container for the animation.
• .glass.top and .glass.bottom are the top and bottom sections of the hourglass.
• .sand represents the sand in the top glass, .sand-fill represents sand filling the bottom, and .sand-flow simulates sand pouring down the hourglass.

Step 2: Adding CSS for Styling and Animation

Now, let’s dive into the CSS that styles each element and adds the animations.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #2d3436;
}

.sand-timer {
  width: 80px;
  height: 200px;
  position: relative;
}
.glass {
  width: 80px;
  height: 100px;
  position: absolute;
  overflow: hidden;
  border: 4px solid #dfe6e9;
}

.glass.top {
  top: 0;
  border-radius: 50% 50% 0 0;
}

.glass.bottom {
  top: 100px;
  transform: rotate(180deg);
  border-radius: 0 0 50% 50%;
}
.sand {
  width: 100%;
  height: 100%;
  background-color: #f39c12;
  animation: sand-drop 4s linear infinite;
}
.sand-fill {
  width: 100%;
  height: 0;
  background-color: #f39c12;
  animation: sand-fill 4s linear infinite;
}
.sand-flow {
  width: 8px;
  height: 80px;
  background-color: #f39c12;
  position: absolute;
  top: 60px;
  left: 36px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: sand-flow 4s linear infinite;
}
@keyframes sand-drop {
  0% { height: 100%; }
  100% { height: 0%; }
}
@keyframes sand-fill {
  0% { height: 0%; }
  100% { height: 100%; }
}
@keyframes sand-flow {
  0%, 100% { height: 0; }
  50% { height: 80px; }
}

Final Output

With the CSS styles applied to each element and animations set up, we have a functional sand timer animation. Here’s the complete code in a single file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sand Timer Animation</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #2d3436;
    }

    .sand-timer {
      width: 80px;
      height: 200px;
      position: relative;
    }

    .glass {
      width: 80px;
      height: 100px;
      position: absolute;
      overflow: hidden;
      border: 4px solid #dfe6e9;
    }

    .glass.top {
      top: 0;
      border-radius: 50% 50% 0 0;
    }

    .glass.bottom {
      top: 100px;
      transform: rotate(180deg);
      border-radius: 0 0 50% 50%;
    }

    .sand {
      width: 100%;
      height: 100%;
      background-color: #f39c12;
      animation: sand-drop 4s linear infinite;
    }

    .sand-fill {
      width: 100%;
      height: 0;
      background-color: #f39c12;
      animation: sand-fill 4s linear infinite;
    }

    .sand-flow {
      width: 8px;
      height: 80px;
      background-color: #f39c12;
      position: absolute;
      top: 60px;
      left: 36px;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      animation: sand-flow 4s linear infinite;
    }

    @keyframes sand-drop {
      0% { height: 100%; }
      100% { height: 0%; }
    }

    @keyframes sand-fill {
      0% { height: 0%; }
      100% { height: 100%; }
    }

    @keyframes sand-flow {
      0%, 100% { height: 0; }
      50% { height: 80px; }
    }
  </style>
</head>
<body>
  <div class="sand-timer">
    <div class="glass top">
      <div class="sand"></div>
    </div>
    <div class="glass bottom">
      <div class="sand-fill"></div>
    </div>
    <div class="sand-flow"></div>
  </div>
</body>
</html>

Using CSS animations, we’ve created a visually appealing sand timer. This code can be customized further by adjusting animation durations, colors, or even adding additional effects. Have fun experimenting and creating your unique animations!