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.
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:
Please Login to comment...