Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Dancing Keys Effect using HTML and CSS

  • Last Updated : 01 Sep, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :