I am facing a challenge with animating both the bottom and left properties of an object inside a container div simultaneously. How can I make it move diagonally? Despite using keyframes, the following code does not seem to achieve this effect:
#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;
}