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.
<!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:
<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.
<!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:
