CSS keyframe animation with multiple properties

Question

I have a container div with an object inside of it. I can animate one property of it, e.g. bottom, OR left, but can't animate BOTH at the same time. How does one animate both properties at the same time so it moves diagonally? I don't understand why the following code does not work:

#container {
    position: relative;
}

@keyframes move { 
    0%     { left:   0px; bottom:   0px; }
    100%   { left: 122px; bottom: 157px; }
}

#object {
    position: absolute;
    width: 10px; 
    left:   0px;
    bottom: 0px;
    /*animation: name duration timing-function delay iteration-count direction fill-mode play-state; */    
    animation: move 2.5s linear 0s infinite;
}

Answer 1

It does move diagonally:

#container {
    position: relative;
    height: 180px;
}

@keyframes move { 
    0%     { left:   0px; bottom:   0px; }
    100%   { left: 122px; bottom: 157px; }
}

#object {
    position: absolute;
    width: 10px; 
    left:   0px;
    bottom: 0px;
    animation: move 2.5s linear 0s infinite;
}

<div id="container"><div id="object">MOVING</div></div>