If you go to the home page of this website, you might find some hidden "easter eggs" around the page. One of which is an emoji that is animated using CSS. π is the emoji. It's just a waving hand, that doesn't actually wave. There is no animation, so I wanted to make it move. It's actually pretty easy!
Step 1: Create HTML
<div class="waving" data-hover="π">Hi</div>
All I've done here is create a simple div with the text, "Hi". Then I've given it 2 HTML attributes, class
and data-hover
. The contents within data-hover
( π ) is what will be animated.
Step 2: Create CSS
`.waving:before {
content: attr(data-hover);
}
.waving:hover {
animation-name: wave-animation;
animation-duration: 3.0s;
animation-iteration-count: infinite;
transform-origin: 70% 70%;
}
@keyframes wave-animation {
0% {
transform: rotate( 0.0deg)
}
10% {
transform: rotate(14.0deg)
}
20% {
transform: rotate(-8.0deg)
}
30% {
transform: rotate(14.0deg)
}
40% {
transform: rotate(-4.0deg)
}
50% {
transform: rotate(10.0deg)
}
60% {
transform: rotate( 0.0deg)
}
100% {
transform: rotate( 0.0deg)
}
}`
.waving:before
defines the content of which is to be displayed ( π ).
.waving:hover
defines what action happens when we hover over that element. In this case we have an animation-name
which is defined below in @keyframes wave-animation
. We also give it an animation-duration of 3 seconds
and tell it to animate infinitely
.
@keyframes wave-animation
is where we create the actual animation. In this case, I wanted to make the hand wave, so to do this I just want the hand to rotate back and forth. I add different keyframes and tell it to rotate a certain number of degrees in certain intervals. This mimics π actually waving!
You can apply this basic template to any emoji. Be creative! For example, you can try to animate a rocket π using CSS. Just think of what type of animation you want it to do (possibly translate up and down).
For more articles check out my blog @ anthonydellavecchia.com
Top comments (1)
Assalamu Alaykum, great and thanks bro, God bless you. Warm wishes from Uzbekistan Republic (Karakalpakstan)