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.
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 EFECT
</title>
<style>
h1 {
position: absolute;
top: 10%;
left: 10%;
}
h1 span {
border-radius: 15px;
color: #262626;
background: linear-gradient(to bottom, #66ffcc 0%, #ccff99 100%);
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.8s 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;
}
</style>
</head>
<body>
<h1>
<span>A</span>
<span>J</span>
<span>C</span>
<span>R</span>
<span>E</span>
<span>A</span>
<span>T</span>
<span>I</span>
<span>O</span>
<span>N</span>
</h1>
</body>
</html>
0 Comments