{"id":322983,"date":"2020-10-14T07:47:40","date_gmt":"2020-10-14T14:47:40","guid":{"rendered":"https:\/\/css-tricks.com\/?p=322983"},"modified":"2020-10-14T07:47:43","modified_gmt":"2020-10-14T14:47:43","slug":"how-to-create-a-realistic-motion-blur-with-css-transitions","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-create-a-realistic-motion-blur-with-css-transitions\/","title":{"rendered":"How to Create a Realistic Motion Blur with CSS Transitions"},"content":{"rendered":"\n

Before we delve into making a realistic motion blur in CSS, it\u2019s worth doing a quick dive into what motion blur is<\/em>, so we can have a better idea of what we\u2019re trying to reproduce.<\/p>\n\n\n\n

Have you ever taken a photo of something moving quickly, especially under low light, and it turned into a blurry streak? Or maybe the whole camera shook and the whole shot became a series of streaks? This is motion blur, and it\u2019s a byproduct of how a camera works.<\/p>\n\n\n\n\n\n\n

Motion Blur 101<\/h3>\n\n\n

Imagine a camera. It\u2019s got a shutter, a door that opens to let light in, and then closes to stop the light from coming in. From the time it opens, to when it closes, is a single photograph, or a single frame of a moving image.<\/p>\n\n\n\n

\"A
Real motion blur in action (Photo: Kevin Erdvig, Unsplash<\/a>)<\/figcaption><\/figure>\n\n\n\n

If the subject of the frame is moving during the time the shutter is open, we end up taking a photo of an object moving through the frame. On film, this shows up as being a steady smear, with the subject being in an infinite number of places between its starting point to its end. The moving object also ends up being semi-transparent, with parts of the background visible behind it.<\/p>\n\n\n\n

What computers do to fake this is model several subframes, and then composite them together at a fraction of the opacity. Putting lots of copies of the same object in slightly different places along the path of motion creates a pretty convincing facsimile of a motion blur.<\/p>\n\n\n\n

Video compositing apps tend to have settings for how many subdivisions their motion blur should have. If you set this value really low, you can see exactly how the technique works, like this, a frame of an animation of a simple white dot at four samples per frame:<\/p>\n\n\n\n

\"Four
Four samples per frame.<\/figcaption><\/figure>\n\n\n\n
\"Twelve
Here is 12 samples per frame.<\/figcaption><\/figure>\n\n\n\n
\"Thirty-two
And by the time we\u2019re at 32 samples per frame, it\u2019s pretty close to fully real, especially when seen at multiple frames per second.<\/figcaption><\/figure>\n\n\n\n

The number of samples it takes to make a convincing motion blur is entirely relative to the content. Something small with sharp edges that\u2019s moving super fast will need a lot of subframes; but something blurry moving slowly might need only a few. In general, using more will create a more convincing effect.<\/p>\n\n\n

Doing this in CSS<\/h3>\n\n\n

In order to approximate this effect in CSS, we need to create a ton of identical elements, make them semi-transparent, and offset their animations by a tiny fraction of a second.<\/p>\n\n\n\n

First, we\u2019ll set up the base with the animation we want using a CSS transition. We\u2019ll go with a simple black dot, and assign it a transform on hover (or tap, if you’re on mobile). We’ll also animate the border radius and color to show the flexibility of this approach.<\/p>\n\n\n\n

Here is the base animation without motion blur:<\/p>\n\n\n\n