51
How to Animate an Emoji with CSS
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!
<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.
`.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
51