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%     { 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>

Answer 2

你可以考虑翻译有相同的动作，性能更好：

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

CSS 具有多个属性的关键帧动画

CSS keyframe animation with multiple properties

css

cakeyframeanimation

css-animations