I have a very simple links page for sharing links on Instagram and other social media. It currently looks like this:
I like to add a little flair throughout the year though and with Thanksgiving being tomorrow, I thought, "why not give thanks to those who visit my links page by showing them one of the most beautiful birds there is, the Wild Turkey?".
I know, its breathtaking. After you take a moment to recover, let's go through the code.
We start with a basic CSS animation. For the HTML there is a <div class="turkey"> that we will be manipulating. Let's set the height and width of the div and the background image to the .png file of the turkey.
The CSS property animation-delay only applies to the first iteration of an animation so to create a delay before each turkey entrance, I opted to position the turkey further to the left at the start of each iteration.
This all looks pretty good but there are two problems:
The speed at which the turkey trots depends on the width of the browser window since the animation duration is a set value
The width of the path the turkey trots is not updated when the user resizes the browser window with some browsers. For animations, the relative values (vw) get converted to absolute values but do not automatically get updated when the window resizes.
By modifying the value of the animation-duration property this causes all of the animation values to be recalculated on a window resize so this takes care of both of our problems: maintaining a constant turkey trot speed and making sure the turkey trots across the entire screen.