<!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
>
<
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
>
<
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
>