Animating Emojis

I told you last year this would eventually become a yearly tradition.

Bring in our main character, the Evergreen Tree 🌲. Even Emojipedia admits that it may be decorated in the form of a 🎄 Christmas Tree.

This year’s animation is an even tougher one, as it is not highly likely that the emoji set on your system uses the same size for both trees. Let’s do it anyway.

Head over to CodePen to see the magic happen. Ideally, you should see a Christmas Tree with what appears to be blinking lights.

‘Tis the season to be jolly.

Bonus: Art Mode

How about, instead of blinking lights, we make this a piece of art?

By that I mean we put up the Christmas decoration only once a year. To do so, we slow the animation down to a duration of 365.25 days (fractions courtesy of leap years), and then replace our regular tree with the Christmas tree for three consecutive days. Consider the following.

.art {
	/* animation-duration: 1 Julien astronomical year, in seconds */
	animation: appear-3-days 31557600s infinite;
}

@keyframes appear-3-days {
	/* 3 days in 1 Gregorian calendar year make up 0.821917808219% */
	0%, 0.821917808220%, 100% {
		opacity: 0;
	}
	0.000000000001%, 0.821917808219% {
		opacity: 1;
	}
}

Hence the cooking recipe for Art Mode is:

1. Sprinkle my CodePen with the example code above.
2. Open the result in your browser on December 24.
3. Keep the browser tab open for at least four years.