CSS ключевая анимация с несколькими свойствами

Question

У меня есть контейнер div с объектом внутри него.Я могу анимировать одно его свойство, например, снизу, ИЛИ слева, но не могу оживить ОБА одновременно.Как можно анимировать оба свойства одновременно, чтобы оно двигалось по диагонали?Я не понимаю, почему не работает следующий код:

#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

Вы можете считать, что перевод имеет то же движение с лучшей производительностью:

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

@keyframes move { 
    0%     { transform:translate(0,0) }
    100%   { transform:translate(125px,-125px) }
}

#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>

Answer 2

Это делает движение по диагонали:

#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>