RE: [css3-animation] keyframes without animations

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 Tuesday, 12 January 2010 20:34:02 UTC