Search code examples
htmlcssanimationcss-animationskeyframe

How to specify keyframes in a CSS animation positioned by a property value?

Keyframes in CSS animations are "positioned" in percentages:

@keyframes foo {
    0% { ... }
    50% { ... }
    100% { ... }
}

I have a simple animation where an object moves across the screen. However, the distance it moves is unknown.

Is it possible to make keyframes in a CSS animation, but their "position" in the animation is specified by a property value?

Pseudo-code:

@keyframes foo {
    0% {
        left: 0;
        background-color: green;
    }
    (left: 200px) { /* When the element's left position gets to 200px, this happens */
        background-color: red;
    }
    100% {
        left: 100%;
        background-color: red;
    }
}
Solution

  • Impossible in CSS.

    You can do this with jQuery animate, MotionJS or VelocityjS (faster)