Update animate-images-with-keyframes-using-css.mdx

Author: asiqurrahman

projects/animate-images-with-keyframes-using-css/animate-images-with-keyframes-using-css.mdx

@@ -179,3 +179,61 @@ The result of the club penguin sensei looks like this 🔥🔥
 
 <RoundedImage link="https://i.imgur.com/YVnPHFA.gif" description="spinning club penguin sensei" />
 
+## Hovering Animation 
+
+Imagine you're playing a video game and you're choosing which character to play as, or you're in an idle mode. 
+
+<RoundedImage link="https://i.imgur.com/PVfHyBD.gif" description="game mode idle hovering player" />
+
+This is a hovering animation that we can create with keyframes! 
+
+```
+<div className="sensei">
+  <img src="sensei.png" alt="club penguin gray sensei penguin" />
+</div>
+```
+```
+/* bouncing animation (floating)  */
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-30px);
+  }
+}
+
+.sensei {
+  animation: bounce 1s linear infinite;
+  display: flex;
+  justify-content: center; 
+  align-items: center; 
+  height: 100vh; 
+}
+```
+
+Here, we're translating (aka moving) the object's Y position by 30 pixels halfway through the animation, and returning it to its original spot at the end using a `linear` ease. 
+
+The beautiful result: 
+
+<RoundedImage link="https://i.imgur.com/69VUqyO.gif" description="club penguin sensei hovering" />
+
+
+To achieve this animation speed, we set the length of time to `1s`, but you can play around with this value to get the effect you want! 
+
+
+## Conclusion
+
+Congrats! You've learned the basics of CSS image animation, and as you can tell, it's a world of opportunities to add flair to your website or project! ✨✨✨
+
+<RoundedImage link="https://i.imgur.com/7QS4kBF.gif" description="pokemon flying" />
+
+Some other ways you can animate images include:
+
+- bounce effect
+- heartbeat pulse 
+- zoom in/out
+- shake or vibration
+- pop on hover
+- wave effect 
+- + many more!