text-shadow and box-shadow.
View the CSS3 motion blur demonstration…
If an object is moving to the right, we can apply a text-shadow which extends to the left using a similar color to the text. In the example above, the text starts and ends with no shadow. However, half-way through the animation — the fastest point — it’s set to:
text-shadow: -5px 0 5px rgba(255,255,255,1);
It’s subtle, but applying a heavier shadow wouldn’t necessarily look effective.
Similarly, we can also use a box-shadow
with a similar color to the text background. At the half-way point, it’s set to:
box-shadow: -15px 0 10px -5px rgba(200,0,0,0.5);- an x-offset of -15px
- a blur radius of 10px, and
- a spread distance of -5px.
box-shadow will be noticeably larger than the box itself. In my demonstration, I found a value of around half the blur radius worked well but you may need to adjust it depending on your element’s size and direction.
The full keyframes definition moves the element from left to right for the first 50% of the animation followed by right to left for the second half. Therefore, the maximum text-shadow and box-shadow settings are defined at 25% and 75% accordingly:
@keyframes motionblur {
0%
{
left: 0;
text-shadow: 0 0 0 rgba(255,255,255,0);
box-shadow: 0 0 0 rgba(200,0,0,0);
}
5%
{
left: 0;
transform-origin: 0 0;
transform: scaleX(0.85);
}
25%
{
text-shadow: -5px 0 5px rgba(255,255,255,1);
box-shadow: -15px 0 10px -5px rgba(200,0,0,0.5);
transform: scaleX(1.1) skewX(-4deg);
}
50%
{
left: 300px;
text-shadow: 0 0 0 rgba(255,255,255,0);
box-shadow: 0 0 0 rgba(200,0,0,0);
transform: scaleX(1) skewX(0deg);
}
55%
{
left: 300px;
transform-origin: 100% 0;
transform: scaleX(0.85);
}
75%
{
text-shadow: 5px 0 5px rgba(255,255,255,1);
box-shadow: 15px 0 10px -5px rgba(200,0,0,0.5);
transform: scaleX(1.1) skewX(4deg);
}
100%
{
left: 0px;
text-shadow: 0 0 0 rgba(255,255,255,0);
box-shadow: 0 0 0 rgba(200,0,0,0);
transform: scaleX(1) skewX(0deg);
}
}- squeezed at the start so it looks as though it’s about to pounce
- elongated and skewed at the animation mid point to give the impression of acceleration, and
- returned to its normal dimensions at the end.
- IE10
- Firefox
- Chrome, Safari and Opera 15 — although you will require -webkit prefixes for all
animationandtransformproperties.
text-shadow: 0 0 0 rgba(255,255,255,0);
box-shadow: 0 0 0 rgba(200,0,0,0);box-shadow: none to box-shadow: something. I suspect it affects other CSS properties so it’s worth filing in your box of quirky browser issues.
Please send me your URLs if you use the technique elsewhere!
Frequently Asked Questions (FAQs) on Using Motion Blur in CSS3 Animations
How can I create a realistic motion blur effect using CSS3 animations?
Creating a realistic motion blur effect using CSS3 animations involves using the ‘filter’ property and the ‘blur()’ function. The ‘filter’ property is used to apply graphical effects like blurring to an element. The ‘blur()’ function applies a Gaussian blur to the image. The parameter inside the ‘blur()’ function determines the radius of the blur. The larger the radius, the greater the blur effect. Here’s a simple example:div {
filter: blur(5px);}
In this example, a blur effect with a radius of 5 pixels is applied to the ‘div’ element.
Can I animate the blur effect in CSS3?
Yes, you can animate the blur effect in CSS3 using keyframes and the animation property. Keyframes are used to specify the behavior of one cycle of a CSS animation. The animation property is a shorthand property for setting multiple animation properties in a single declaration. Here’s an example:@keyframes blur {
0% {filter: blur(0px);}
100% {filter: blur(5px);}}div {
animation: blur 2s infinite;}
In this example, the ‘div’ element will continuously animate from no blur to a blur effect with a radius of 5 pixels over a period of 2 seconds.
How can I control the speed of the motion blur effect?
The speed of the motion blur effect can be controlled by adjusting the duration of the animation. The duration is specified using the ‘animation-duration’ property or as the second value of the ‘animation’ shorthand property. The duration is specified in seconds (s) or milliseconds (ms). Here’s an example:div {
animation: blur 5s infinite;}
In this example, the duration of the animation is set to 5 seconds, which means the ‘div’ element will animate from no blur to a blur effect with a radius of 5 pixels over a period of 5 seconds.
Can I apply the motion blur effect to text?
Yes, you can apply the motion blur effect to text. The ‘filter’ property and the ‘blur()’ function can be applied to any HTML element, including text elements like ‘p’, ‘h1’, ‘h2’, etc. Here’s an example:p {
filter: blur(2px);}
In this example, a blur effect with a radius of 2 pixels is applied to the ‘p’ element.
How can I create a motion blur effect that fades in and out?
You can create a motion blur effect that fades in and out by using keyframes to animate the ‘filter’ property from no blur to blur and then back to no blur. Here’s an example:@keyframes blur {
0% {filter: blur(0px);}
50% {filter: blur(5px);}
100% {filter: blur(0px);}}div {
animation: blur 2s infinite;}
In this example, the ‘div’ element will animate from no blur to a blur effect with a radius of 5 pixels and then back to no blur over a period of 2 seconds. This creates a motion blur effect that fades in and out.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
