How to make a Realistic Motion Blur with CSS Transitions ? - GeeksforGeeks

08 Nov, 2021
In this article, we are going to create a realistic Motion Blur effect with CSS Transitions. Motion Blur is a special kind of effect that we can see in various online videos, movies, or animated clips. When an object moves from one place to another place with some fair speed then it gets blurred which makes the user infer that the object is moving fast. 
We are going to create the same effect using the CSS transition property. CSS Transitions: This property allows us to move the element smoothly on the page. We will use the CSS transition-delay property which helps us to start the transition with some delay as specified.
Approach: We will create the same shape 15 times and use a slightly different transition delay for each element for moving the element from one position to another position. This simple method will help us to create a realistic motion blur of that element.
 
Example 1: We will use a rectangular shape for our motion blur effect, when the cursor will move to the container, the shape will start to move with the motion blur effect. 
HTML
<!DOCTYPE html><html lang="en">  <head>    <style>        .object_container {            width: 100%;            height: 100px;            position: relative;            margin: 100px auto;            text-align: center;            font-family: sans-serif;            padding-top: 10px;            background-color: rgb(32, 32, 32);        }          .shape {            position: absolute;            background: rgb(255, 255, 255);            width: 50px;            height: 50px;            border-radius: 0%;            transform: rotate(0deg);            top: 25px;            left: 25px;            opacity: 0.1;            transition: all 0.75s                 cubic-bezier(0.23, 1, 0.32, 1) 0ms;        }          .object_container:hover .shape {            left: 525px;        }          .shape.two {            transition-delay: 2ms;        }          .shape.three {            transition-delay: 4ms;        }          .shape.four {            transition-delay: 6ms;        }          .shape.five {            transition-delay: 8ms;        }          .shape.six {            transition-delay: 10ms;        }          .shape.seven {            transition-delay: 12ms;        }          .shape.eight {            transition-delay: 14ms;        }          .shape.nine {            transition-delay: 16ms;        }          .shape.ten {            transition-delay: 18ms;        }          .shape.eleven {            transition-delay: 20ms;        }          .shape.twelve {            transition-delay: 22ms;        }          .shape.thirteen {            transition-delay: 24ms;        }          .shape.fourteen {            transition-delay: 26ms;        }          .shape.fifteen {            transition-delay: 28ms;        }    </style></head>  <body>    <div class="object_container">        <div class="shape one"><br /></div>        <div class="shape two"><br /></div>        <div class="shape three"><br /></div>        <div class="shape four"><br /></div>        <div class="shape five"><br /></div>        <div class="shape six"><br /></div>        <div class="shape seven"><br /></div>        <div class="shape eight"><br /></div>        <div class="shape nine"><br /></div>        <div class="shape ten"><br /></div>        <div class="shape eleven"><br /></div>        <div class="shape twelve"><br /></div>        <div class="shape thirteen"><br /></div>        <div class="shape fourteen"><br /></div>        <div class="shape fifteen"><br /></div>    </div></body>  </html>
Output:
Motion Blur with CSS Transition
Example 2: In this example, we can clearly see the difference between with and without motion blur we will apply the same effect on the circular shape.
HTML
<!DOCTYPE html><html lang="en">  <head>    <style>        body {            background-color: rgb(41, 41, 41);        }          /* First container is moving         without motion blur */        .object_container1 {            width: 615px;            height: 100px;            position: absolute;            margin: 100px auto;            text-align: center;            font-family: sans-serif;            padding-top: 10px;            background-color: rgb(32, 32, 32);        }          /* Second container is moving         with motion blur */        .object_container2 {            width: 615px;            height: 100px;            position: absolute;            margin: 100px auto;            text-align: center;            font-family: sans-serif;            padding-top: 10px;            background-color: rgb(32, 32, 32);        }          /* For this shape we have removed         the transition effect */        .shape1 {            position: absolute;            background: rgb(255, 255, 255);            width: 50px;            height: 50px;            border-radius: 0%;            transform: rotate(0deg);            top: 25px;            left: 25px;            opacity: 0.1;            border-radius: 100%;        }          /* We have added the transition effect         so we can see the motion blur effect */        .shape2 {            position: absolute;            background: rgb(255, 255, 255);            width: 50px;            height: 50px;            border-radius: 0%;            transform: rotate(0deg);            top: 25px;            left: 25px;            opacity: 0.1;            transition: all 0.75s                 cubic-bezier(0.23, 1, 0.32, 1) 0ms;            border-radius: 100%;        }          .box1 .box2 {            display: flex;            flex-direction: column;            align-items: center;            justify-content: center;        }          .box1 {            top: 100px;            left: 100px;            position: absolute;            height: 350px;            width: 32%;            background-color: #fff;        }          .box2 {            top: 100px;            right: 100px;            position: absolute;            height: 350px;            width: 32%;            background-color: #fff;        }          #without {            position: absolute;            top: 370px;            left: 200px;            color: #fff;        }          #with {            position: absolute;            top: 370px;            right: 200px;            color: #fff;        }          .object_container1:hover .shape1 {            left: 525px;        }          .object_container2:hover .shape2 {            left: 525px;        }          .shape2.two {            transition-delay: 2ms;        }          .shape2.three {            transition-delay: 4ms;        }          .shape2.four {            transition-delay: 6ms;        }          .shape2.five {            transition-delay: 8ms;        }          .shape2.six {            transition-delay: 10ms;        }          .shape2.seven {            transition-delay: 12ms;        }          .shape2.eight {            transition-delay: 14ms;        }          .shape2.nine {            transition-delay: 16ms;        }          .shape2.ten {            transition-delay: 18ms;        }    </style></head>  <body>      <!-- With motion blur -->    <div class="box1">        <div class="object_container1">            <div class="shape1 one"><br /></div>            <div class="shape1 two"><br /></div>            <div class="shape1 three"><br /></div>            <div class="shape1 four"><br /></div>            <div class="shape1 five"><br /></div>            <div class="shape1 six"><br /></div>            <div class="shape1 seven"><br /></div>            <div class="shape1 eight"><br /></div>            <div class="shape1 nine"><br /></div>            <div class="shape1 ten"><br /></div>        </div>        <h1 id="without">Without Motion blur</h1>    </div>      <!-- Without motion blur -->    <div class="box2">        <div class="object_container2">            <div class="shape2 one"><br /></div>            <div class="shape2 two"><br /></div>            <div class="shape2 three"><br /></div>            <div class="shape2 four"><br /></div>            <div class="shape2 five"><br /></div>            <div class="shape2 six"><br /></div>            <div class="shape2 seven"><br /></div>            <div class="shape2 eight"><br /></div>            <div class="shape2 nine"><br /></div>            <div class="shape2 ten"><br /></div>        </div>          <h1 id="with">With Motion blur</h1>    </div></body>  </html>
Output:
Motion blur with CSS Transition
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?