Animated rose using JS and CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rose</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background-color: #f0f0f0;
            }

.rose-container {
                position: relative;
                cursor: pointer;
                text-align: center;
            }

.rose {
                width: 350px;
                height: 350px;
                background-image: url('https://eternalpetals.com/cdn/shop/products/top-baby_blue_grande.jpg?v=1571439624');
                background-size: contain; 
                background-repeat: no-repeat; 
                background-position: center; 
                transition: transform 0.5s ease-in-out;
            }

.message-container {
                display: none;
                text-align: center;
                position: relative;
                font-size: 200px;
                color: #89CFF0; 
                line-height: 1;
            }

.heart {
                position: relative;
            }

.message {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 24px;
                color: white;
                text-align: center;
                font-weight: bold;
            }

.click-me-heading {
                font-size: 36px;
                color: #89CFF0; 
                font-weight: bold;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div class="rose-container" onclick="showHeart()">
            <div class="click-me-heading" id="clickMeHeading">Click Me!</div>
            <div class="rose" id="rose"></div>
            <div class="message-container" id="messageContainer">
                <div class="heart">