Dancing Keys Effect using HTML and CSS

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.

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:

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

Output: