Coffee cup mist animation

[UserAkku]

Description

Added an interactive Coffee Cup Animation project that creates a cozy and engaging visual experience using pure HTML and CSS animations.

Features

• Smooth coffee cup lift animation on hover
• Realistic rising steam effect with staggered animation
• Floating heart animation for warmth and love
• "HOT & FRESH!" text reveal effect
• Responsive design that works on all screen sizes
• Pure CSS animations - no JavaScript required
• Modern dark-themed UI with warm color palette

Technical Implementation

• HTML5 for semantic structure
• CSS3 for animations using:
• @keyframes for steam rising and heart floating effects
• Transform properties for smooth cup lift
• Filter blur for realistic steam appearance
• RGBA colors for semi-transparent steam
• Sequential animation delays for natural steam flow

Animation Details

• Coffee cup lifts 20px upward when hovered
• Three steam trails rise with staggered timing (0s, 0.3s, 0.6s delays)
• Steam gradually fades and expands while rising
• Heart floats upward with scale and fade effect
• Text appears smoothly on hover
• All animations use ease-in-out timing for natural motion

How to Use

1. Open index.html in any modern browser
2. Hover over the coffee cup emoji
3. Enjoy the warm, animated coffee experience!

Files Added

• index.html - Main HTML structure
• style.css - Animation styles and effects
• meta.json - Project metadata

Hacktoberfest 2025

This contribution is made for Hacktoberfest 2025

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• HTML feedback for Art/UserAkku-pentagon/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

• CSS feedback for Art/UserAkku-pentagon/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary

Happy Coding! 🚀

[LaurelineP]

Aloha @UserAkku !
It looks like you have duplicate labels because you likely created your new PR on top of a previous one, instead of checking out the master branch and starting fresh for each PR. This causes your previously submitted animation(s) to get included again in the new PR.

To fix this, make sure that for each PR, you remove any animation folders that do not belong to that specific PR.

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• Overall feedback
  Reminder: the contribution should have 3 files in a folder in Art

  • Missing in 1 of the 3 contributions folders
    - please add the missing css file in the folder Art/UserAkku-pentagon

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• HTML feedback for Art/UserAkku-pentagon/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• Overall feedback
  Reminder: the contribution should have 3 files in a folder in Art

  • Missing in 1 of the 3 contributions folders
    - please add the missing html, css files in the folder Art/UserAkku-pentagon

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• Overall feedback
  Reminder: the contribution should have 3 files in a folder in Art

  • Missing in 1 of the 2 contributions folders
    - please add the missing json file in the folder Art/UserAkku-Music-On

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Coffee-Cup-Animation/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/styles.css

  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• CSS feedback for Art/UserAkku-Coffee-Cup-Animation/styles.css

  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!

🎉 Your submission meets all pre-review requirements!
It’s now awaiting final validation from a maintainer.

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!

🎉 Your submission meets all pre-review requirements!
It’s now awaiting final validation from a maintainer.

Happy Coding! 🚀