Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 5, 2022 03:45 am GMT

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!

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


Original Link: https://dev.to/anthonyjdella/how-to-animate-an-emoji-with-css-5eb9

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To