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.
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:
Share your thoughts in the comments
Please Login to comment...