Set the element property to default in the "from" keyword of the keyframe

Question

Using keywords from and to the keyframe rule , an animation is declared by specifying the required property of the corresponding element. However, the keyword from seems to expect an element property with a predefined value - I tried auto , inherit , initial , etc. to no avail. The problem is that I want to move the element down by specifying top , but I don't know the initial value (can be achieved using js , but I hope there is another solution).

Here are two scripts:

http://jsfiddle.net/v4m92/

and

http://jsfiddle.net/hExdU/

@keyframes kf {
    from {
        top: 0;
    }
    to {
        top: 10px;
    }
}

The difference is only in providing the upper predefined value - as you can see, the animation only works in one of the examples. Is there anything that can be done to get another to work without sizing using javascript and changing the basic animation rule?

Answer 1

like 2rror404, you can use CSS conversion to do the same.

@keyframes kf {
    from {
        transform: translateY(0);
   }
    to {
        transform: translateY(100px);
    }
}

(shown without browser prefixes for short)