An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To