Re: [css3-animation] keyframes without animations

If you set the animation-duration to 0 there will be no movement at  
all. Because the animation "loop" will be finished in 0 second.

Try these examples in a webkit based browser:
CSS3 animation with animation-duration set to "2s":
http://nemeseri.com/cssanimation/cssanimation_1.html

CSS3 animation with animation-duration set to "0":
http://nemeseri.com/cssanimation/cssanimation_2.html

In the second case there isn't any animation.

You said:
"tou can set animation-duration of 0 and animation-delay of 1s on each  
frame"

How can I set animation-duration or animation-delay on each frame? The  
specification says that the "animation-timing-function" is the only  
animation related css property which can be set on keyframes:
http://www.w3.org/TR/css3-animations/#animation-timing-function_tag

I have tried to set animation-delay and animation-duration on the  
keyframes with no luck.

I'm still searching for a working method to do a simple 3 step  
animation without smooth animation between the steps.

Now there is this a great specification which make it possible to  
animate without javascript. I don't want to use js to make a 3 step  
movement just because I want it without smoothing.

Thanks,
Andras Nemeseri



On Jan 12, 2010, at 21:33 , Sylvain Galineau wrote:

> If you want the user to notice the top property going through 0, 50  
> and 150px then this imply an animation duration and thus the choice  
> of a timing function for each leg of the animation. If you want the  
> values to transition immediately tou can set the animation-duration  
> to 0 but the visible result will be that top property will appear to  
> go from 0 to 150px.
>
> Now, should you want each of the 3 steps to occur over, say, a three- 
> second interval with no smoothing of the progression in between them  
> i.e. the top property is 0, then 50 then 150, then I think the  
> solution would be to set an animation-duration of 0 and animation- 
> delay of 1s on each frame. The zero duration says the change is  
> immediate, the delay postpones it by the desired timeframe.
>
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On  
> Behalf Of Andras Nemeseri
> Sent: Monday, January 11, 2010 9:00 AM
> To: www-style@w3.org
> Subject: [css3-animation] keyframes without animations
>
> How can I define "keyframes" without animation?
> I don't want an "animation-timing-function" controlled animation,  
> instead I would like to simply change CSS properties in the key  
> frames (without any animation effects).
>
> It would be usable if the "animation-timing-function" property had a  
> "none" value.
>
> # @keyframes 'frames' {
> #
> #     from {
> #         top: 0;
> #         animation-timing-function: none;
> #     }
> #
> #     50% {
> #         top: 50px;
> #         animation-timing-function: none;
> #     }
> #
> #     to {
> #         top: 150px;
> #     }
> #
> # }
>
> In the upper case, the "animated" element would jumps from 0 to   
> 50px, then from 50px to 150px without any animation.
>
> Is there any CSS based solution to this problem? (or do I still need  
> javascript to do a simple 3 (or more) step CSS value change?)
>
> Thanks,
> Andras Nemeseri

Received on Wednesday, 13 January 2010 22:36:18 UTC