Animating Images With CSS Keyframes

A few weeks ago, I came across this video by Joe Fellows explaining how to create “parallax” effects on photos using a combination of Photoshop and After Effects. After watching it, it got me thinking – “Why not try to create similar effects for images on the web with CSS keyframe animations?”

at bottom there is a demo I’ve created experimenting with this technique. I’ll go through an example to show you how it works.

Download Source Files 

---

Keyframing In CSS

If you’re familiar with software like After Effects, that (in addition to a whole bunch of video editing features) use a simple timeline based keyframe workflow – you’ll notice some similarities with CSS’s keyframe syntax. Keyframing is such an incredible facet of CSS and I feel we’re only really scratching the surface as to what’s possible. If you’re not totally familiar with the syntax, head over to CSS-Tricks here and read up on it.

---

Find A Photo

First step is to find a photo that’s suitable for animation. You’ll want an image that already has a sense of movement in it, preferably in the subject of the photo. All the images I’ve used in the demo come from UNSPLASH – a great resource for royalty-free stock images.
As an example, I’ll go through the windmill animation. You can find the original image for download here.

---

Cut Out The Bits For Animation

Next, choose the pieces you want to animate in the photo and cut them out in Photoshop. In this example I’ll be animating the arms of the wind turbines. Use the Magnetic Lasso tool to select them.


You’ll probably notice some white (or whatever color the background is) edges around the pieces you cut out. There’s lots of ways of fixing this in Photoshop. The way I do it is, once you have your cutout selected, open up the Refine Edge panel by going to Select -> Refine Edge. You can then adjust the selection using a radius and a little feather to smooth things out. You can also change the preview background-color to get a clearer view of the selection. Try shifting the selection edge in and out as well.

Once you’ve finished, save the pieces for animation as a PNG with a transparent background.

---

Fill In the background

Next you’ll need to fill in the background where you’ve cut out pieces. Use the Clone Stamp Tool to paint over the missing bits, using adjacent parts of the background as a clone. For anything large, use a large soft brush. For smaller details, use a harder and smaller brush.

Once you’re done with the background, save it as a PNG.

---

Setup The Code

Next, setup your divs for the image. For this windmill example there are 3 images – the background and the two turbines. Position the elements relatively inside an absolute positioned wrapper.

HTML

<div class="image-wrap">

<div class="windmill-background"></div>
<div class="mill1"></div>
<div class="mill2"></div>

</div>

CSS

.image-wrap {
position:relative;
overflow:hidden;
}

.image-wrap .windmill-background {
background:url(wind-bg.png) no-repeat;
background-size:cover;
}

.image-wrap .mill1 {
background:url(mill1.png) no-repeat;
background-size:contain;
position:absolute;
}

Position the elements to be animated

To position the elements correctly set a general left: and top: position of where you think they should go. Open up Chrome’s dev tools (or whatever browser you work with). Select the positioning values and use your arrow keys to adjust them up/down until its in position.

---

Setup The Animation

Next setup the animation for the elements. It’s important to make the effect as subtle as possible – meaning really slow animations. If the animations are too fast, the effect can look fake and doesn’t work all that well. In the case of these turbines, I set them to rotate 360 degrees over the course of 90 seconds.

CSS

.image-wrap .mill {
animation:spin 90s infinite linear;
transform-origin:127px 89px;
}

@keyframes spin {
0% {transform: rotateZ(0deg)}
100% {transform: rotateZ(360deg)}
}

For the transform-origin: – use the same technique we used to position the elements and adjust the properties until the transform origin is at the center of the turbine. Note that this won’t necessarily be the center of the image.

---

Working Demo.

Here’s a working demo of the windmill example.

See the Pen acgpf by Abhishek (@abhibagul) on CodePen.

Final Thoughts Animating images like this add a nice little subtle effect making for a little surprise for the user, it’s also nice to try something a bit different sometimes. There’s a fair bit of work involved in prepping the assets for this kind of thing, however I think it pays off in the end. One thing to note is it can be difficult to pull-off the effect on responsive images (i.e width:100%;) because you need to position absolute elements inside the wrapper. Having said that, you could use a series of breakpoints to adjust everything at specific screen sizes as an alternative. I hope you enjoyed this experiment.