Create animation for messages when button is clicked

🎈 Using Streamlit
1

Summary

I am attempting to create a button that, when clicked, will display a message for a specified period of time and then gradually fade away and disappear once the timer has run out.

Steps to reproduce

Code snippet:

import streamlit as st
from time import sleep

if st.button("Hello"):

    with st.empty():
        for second in range(2):
            st.success(f"Success - ⏳ {second+1}", icon="✅")
            sleep(1)

    # Add CSS to fade out the message
    st.markdown("""
        <style>
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
            .stAlert {
                animation: fadeOut 2s ease;
            }
        </style>
    """, unsafe_allow_html=True)

Expected behavior:

The success message should fade out smoothly and disappear.

Actual behavior:

The success message fades out but does not disappear.

Other info

I tried various approaches like messing with st.empty or using a style.css file but have been unable to find a solution. Thank you in advance :slight_smile: