Dancing Keys Effect using HTML and CSS - GeeksforGeeks

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.
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: 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
adnanirshad158
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)