MMM-Hearts.css

.MMM-Hearts .flake-downwards {
    position: absolute;
    top: -50px;
    animation-name: flake-downwards;
    animation-iteration-count: infinite;
}

.MMM-Hearts .flake-upwards {
    position: absolute;
    top: -50px;
    animation-name: flake-upwards;
    animation-iteration-count: infinite;
}

.MMM-Hearts *[class|="flake"] div {
    width: 20px;
    height: 20px;

    background-repeat: no-repeat;
    background-size: cover;

    animation-name: flake-jiggle;
    animation-iteration-count: infinite;
}

.MMM-Hearts .snow1 {background-image: url('images/snow1.png');}
.MMM-Hearts .snow2 {background-image: url('images/snow2.png');}
.MMM-Hearts .snow3 {background-image: url('images/snow3.png');}

.MMM-Hearts .heart1 {background-image: url('images/heart1.png');}
.MMM-Hearts .heart2 {background-image: url('images/heart2.png');}

.MMM-Hearts .bubble1 {background-image: url('images/bubble1.png');}

@keyframes flake-downwards {
    from {transform: translateY(0vh)}
    to {transform: translateY(calc(100vh + 20px))}
}

@keyframes flake-upwards {
    from {transform: translateY(calc(100vh + 20px))}
    to {transform: translateY(0vh)}
}

@keyframes flake-jiggle {
    0% {transform: translateX(0vw)}
    20% {transform: translateX(20vw)}
    30% {transform: translateX(5vw)}
    50% {transform: translateX(25vw)}
    70% {transform: translateX(0vw)}
    85% {transform: translateX(15vw)}
    100% {transform: translateX(0vw)}
}