How to make a Realistic Motion Blur with CSS Transitions ?

Last Updated : 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> 