Animation w/ montion blur

[cang_nduc]

hi all.
i just wonder if there’s a way to add motion blur to the animation of an object :)
i’ve googled for it, but couldn’t find the answer

#red {

width:50px;

height:50px;

margin-top:50px;

background-color:red;

-webkit-animation:move 1s infinite alternate;

}

@-webkit-keyframes move {

0% {-webkit-transform:translateX(0px); }

100% {-webkit-transform:translateX(250px)}

}​

[cang_nduc]

no, i mean the object blur out when it moves

[Mottie]

This demo is about the best I can do… maybe someone better at css3 has another trick?

#red {

width:50px;

height:50px;

margin-top:50px;

padding: 2px;

background-color:red;

color: white;

-webkit-animation: move 2s infinite alternate ease-in-out;

-moz-animation: move 2s infinite alternate ease-in-out;

animation: move 2s infinite alternate ease-in-out;

}

@-webkit-keyframes move {

0% {

-webkit-transform:translateX(0px);

-moz-transform:translateX(0px);

transform:translateX(0px);

}

25% {

-webkit-box-shadow: -3px 0px 8px 1px red;

-moz-box-shadow: -3px 0px 8px 1px red;

box-shadow: -3px 0px 8px 1px red;

}

50% {



-webkit-box-shadow: 0 0 8px 1px red;

-moz-box-shadow: 0 0 8px 1px red;

box-shadow: 0 0 8px 1px red;

}

75% {

-webkit-box-shadow: 3px 0px 8px 1px red;

-moz-box-shadow: 3px 0px 8px 1px red;

box-shadow: 3px 0px 8px 1px red;

}

100% {

-webkit-transform:translateX(250px);

-moz-transform:translateX(250px);

transform:translateX(250px);

}

}​

[cang_nduc]

@Mottie : thanks so much for the code. not really motion blur but very well looking. thanks again :)

[Author]

Posts