Photo Animation using CSS Keyframes
This project will take 30 minutes +/- to complete, depending on how skilled you are with CSS keyframes and photo manipulation in Photoshop. Here's a look at the final product:
So, how does one accomplish such magic?
- Select your photo, ensuring it includes object(s) that would normally be moving. I used a photo from UNSPLASH, a royalty free photo sharing platform and awesome resource for stock images.
- Photoshop. Open up the image you plan to animate in photoshop. Using the lasso selection tool, select Object A (in my case, the blades of the first windmill) that you'd like to animate. Select > Refine edges > Save to New Document. In the New Document, crop the cut out piece into a square box. Position the cut out piece so that the center of the object you want to rotate is aligned with the center of the square. Save as a .png with a transparent background. Repeat this step for the other object(s) if applicable (in my case, the smaller windmill in the distance). Revert back to your original "Background" image in Photoshop. Eraser tool > erase the object's selected area which you just cut out to the New Document. "Clone stamp tool" > paint over the white area of the missing objects, making it look as if the windmills had no blades and are just large poles. Save as .png with a transparent background.
- Upload the images to your favorite image host (I used Flikr). Grab the source URLs and label/save them somewhere handy like in your computer notes.
- Create a new Codepen. Copy and paste my code from the Codepen, or setup your own.
- Setup the img divs. There are three image divs in this example (windmill-background, mill1, mill2) because we have three .png's. Replace the source URLs with your source URLs.
- Position the rotating elements and the animation around the origin. Here is how I went about it:
- transform-origin: should be half of the width and height. So, for the first windmill, the width is 300px and the height is 300px. Therefore, the transform-origin is 150px 150px. Why does this work? Because you originally saved the .png as a square box with the center of the blades positioned at the center of the box.
- play around with "left" "top" so the origin is sitting on the top of the windmill pole.