Modifying for CSS animations

[M4N0JKUM4R]

Consider the following situation, I presume this is almost similar to what this plugin does.

Two animations having the transform properties is overridden by the second animation. That is the second animation starts from the initial position and not as an extension of what animation1 does.

A Stack Overflow question: http://stackoverflow.com/questions/32224802/extend-the-final-state-of-the-first-animation-for-translated-element describes that.

The element is moved to 20px, 20px at the final stage and not 35px, 35px.

animation-name: Translate1, Translate2;
@keyframes Translate1 {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(15px, 15px);
    }
}

@keyframes Translate2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(20px, 20px);
    }
}

Is there a possibility of modifying this plugin for this purpose?