{"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 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\nMotion Blur 101<\/h3>\n\n\n