CSS Random number with webkit keyframe

[notoyota]

Hi,
i have this problem:
Using jquery I add divs to a page whenever there is something new to show to the user.
I want these messages to appear in a animated fashion. So i have some star-wars style scrollers, ticker-tape, etc.
Now, I would like to have some fountain like animation.
What i’ve got is this:

@-webkit-keyframes fountain1 {

0% {

-webkit-transform: translate3d(0,0,0);

}

50% {

-webkit-transform: translate3d(-30%,-500%,0);

}

100% {

-webkit-transform: translate3d(-60%,0%,0);

}

}

As you can see i’ve the translate on the X fixed now, but I would like this to be a random value on every new div that gets this animation.

Anyone got any ideas how I can do this cleanly?
Thanks,
Patrick

[m80her]

@notoyota,

Did you ever find a solution for this?

I have created a random animation nicely in jQuery, but would like to use CSS3 animations and fallback to my jQuery solution for legacy browsers.

Thanks

[Author]

Posts