Valentine Colored Hearts

Color Change

I wanted to change the color of a Valentines heart. The structure is same as in JavaScript heart from an earlier post. This post is focused on the CSS Animation.

JavaScript Developer Heart Messages

Chris Jarvis ・ Feb 11 '22

#javascript #beginners #codepen

This is a screenshot. I'm having issues trying to share the live version of this.

/* Animate the colors */
.bigheart, .bigheart:before, .bigheart:after {
    animation: ColorChange 10s infinite;
}

@keyframes ColorChange {
    0% {
        background-color: var(--heart-red);
    }

    100% {
        background-color: var(--orange);
    }
}

This looks good but it loops back to red abruptly.

Make it smoother by changing the orange and adding a 100% stop to the original color. Now it will change from red to orange and slowly back to red.

/* Animate the colors */
.bigheart, .bigheart:before, .bigheart:after {
    animation: ColorChange 10s infinite;
}

@keyframes ColorChange {
    0%, 100% {
        background-color: var(--heart-red);
    }

    50% {
        background-color: var(--orange);
    }
}

Three stops

Adding a third color. So it will go red to yellow to orange and back to red.

@keyframes ColorChange {
    0%, 100% {
        background-color: var(--heart-red);
    }

    50% {
        background-color: var(--yellow);
    }

    66% {
        background-color: var(--orange);
    }
}

Wrap-up

This was fun to play win animations and make the heart change colors. Getting the timing right too some work. at first it was too quick more distracting than enjoyable so I make the time longer.

Previous Posts

JavaScript Developer Heart Messages

Chris Jarvis ・ Feb 11 '22

#javascript #beginners #codepen

JavaScript Hearts: Input a user Message

Chris Jarvis ・ Feb 14 '23

#css #javascript #tutorial