Dancing Keys Effect using HTML and CSS

Last Updated : 29 Jul, 2024

The dancing keys effect is a type of text-animation effect that can be implemented using CSS. In this effect, each letter is given the form of a keyboard key and then animations are applied to move it along either X-axis or Y-axis. This effect is also known as the Jumping Key effect or Piano Key effect. It is generally used in educational websites for kids to make learning fun and interactive.

Approach: The approach is to first design the key using some basic styling and then use keyframes to animate it along any one axis. The nth-child property can also be used to delay the animation of each key separately. This step is optional if one does not want any delay between keys.

HTML Code: In this HTML section, all the letters are wrapped inside the <span> tag which in turn is wrapped inside a <h1> tag.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        DANCING KEY EFFECT
    </title>
</head>

<body>
    <h1>
        <span>G</span>
        <span>E</span>
        <span>E</span>
        <span>K</span>
        <span>S</span>
        <span>F</span>
        <span>O</span>
        <span>R</span>
        <span>G</span>
        <span>E</span>
        <span>E</span>
        <span>K</span>
        <span>S</span>
    </h1>
</body>

</html>

CSS Code: The CSS portion of the code can be defined as follows:

Step 1: Provide a basic background color. In this case, the green color is used.
Step 2: Create keys using a different background color and apply a box-shadows to easily differentiate between each key.
Step 3: Define the keyframes for the animation. The first frame has value of the translateY property as “0px”. The second frame it is moved by a small value like “-20px”. In the last frame it is brought back to 0, creating a looped animation.
Step 4 (Optional): Use n-th child property to specify some delay in animation of each of the keys.

Tip: One can choose any value for the translateY property but one has to sure to keep value as 0 for the first and last frames. There is also no restriction on number of frames in between the first and last frames of the animation.

CSS Code:

HTML

<style>
    body {
        background: green;
    }

    h1 {
        position: absolute;
        top: 50%;
        left: 10%;
    }

    h1 span {
        color: #262626;
        background: #fff;
        padding: 10px 20px;
        display: table-cell;
        box-shadow: inset 0 0 5px 
            rgba(0, 0, 0, 0.3),
                0 5px 0 #ccc;
        animation: animate 0.5s infinite;
    }

    /* Specify the animation keyframes
        to be used to move the letters */
    @keyframes animate {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    /* Specify a slight delay for
        each of the letters */
    h1 span:nth-child(1) {
        animation-delay: 0.1s;
    }

    h1 span:nth-child(2) {
        animation-delay: 0.2s;
    }

    h1 span:nth-child(3) {
        animation-delay: 0.3s;
    }

    h1 span:nth-child(4) {
        animation-delay: 0.4s;
    }

    h1 span:nth-child(5) {
        animation-delay: 0.5s;
    }

    h1 span:nth-child(6) {
        animation-delay: 0.6s;
    }

    h1 span:nth-child(7) {
        animation-delay: 0.7s;
    }

    h1 span:nth-child(8) {
        animation-delay: 0.8s;
    }

    h1 span:nth-child(9) {
        animation-delay: 0.9s;
    }

    h1 span:nth-child(10) {
        animation-delay: 1s;
    }

    h1 span:nth-child(11) {
        animation-delay: 1.1s;
    }

    h1 span:nth-child(12) {
        animation-delay: 1.2s;
    }

    h1 span:nth-child(13) {
        animation-delay: 1.3s;
    }
</style>

Complete Code: In this section, we will combine the above two sections to make the dancing keys effect using HTML and CSS.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>
    DANCING KEY EFFECT
  </title>
  <style>
    body {
      background: green;
    }

    h1 {
      position: absolute;
      top: 50%;
      left: 10%;
    }

    h1 span {
      color: #262626;
      background: #fff;
      padding: 10px 20px;
      display: table-cell;
      box-shadow: inset 0 0 5px
                  rgba(0, 0, 0, 0.3),
                  0 5px 0 #ccc;
      animation: animate 0.5s infinite;
    }

    /* Specify the animation keyframes
       to be used to move the letters */
    @keyframes animate {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-20px);
      }

      100% {
        transform: translateY(0px);
      }
    }

    /* Specify a slight delay for
       each of the letters */
    h1 span:nth-child(1) {
      animation-delay: 0.1s;
    }

    h1 span:nth-child(2) {
      animation-delay: 0.2s;
    }

    h1 span:nth-child(3) {
      animation-delay: 0.3s;
    }

    h1 span:nth-child(4) {
      animation-delay: 0.4s;
    }

    h1 span:nth-child(5) {
      animation-delay: 0.5s;
    }

    h1 span:nth-child(6) {
      animation-delay: 0.6s;
    }

    h1 span:nth-child(7) {
      animation-delay: 0.7s;
    }

    h1 span:nth-child(8) {
      animation-delay: 0.8s;
    }

    h1 span:nth-child(9) {
      animation-delay: 0.9s;
    }

    h1 span:nth-child(10) {
      animation-delay: 1s;
    }

    h1 span:nth-child(11) {
      animation-delay: 1.1s;
    }

    h1 span:nth-child(12) {
      animation-delay: 1.2s;
    }

    h1 span:nth-child(13) {
      animation-delay: 1.3s;
    }
  </style>
</head>
<body>
  <h1>
    <span>G</span>
    <span>E</span>
    <span>E</span>
    <span>K</span>
    <span>S</span>
    <span>F</span>
    <span>O</span>
    <span>R</span>
    <span>G</span>
    <span>E</span>
    <span>E</span>
    <span>K</span>
    <span>S</span>
  </h1>
</body>
</html>

Output:

Difference Between Laravel and CodeIgniter Framework in PHP

sirohimukul1999

Improve

Article Tags :

Dancing Keys Effect using HTML and CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?