CSS - 共享@Keyframes规则集与动画方向和动画 - 填充模式？

Question

我有一个简单的蓝色方块，我想控制2个按钮，“向左移动”和“向右移动”。

• 左移：应该从右侧移动蓝色正方形到左边，褪色0.5的不透明度为1，并保持该动画的最后一帧。

• 向右移动：应将蓝色方块从左向右移动，将不透明度从1淡入0.5，并保留动画的最后一帧。

我想分享一个@keyframes move规则集，但我很困惑与如何animation-direction和animation-fill-mode应该共同努力。

动画第一次被触发是正确的，无论动画是向左还是向右移动，但在此之后它不再像它应该那样动画。

const square = document.getElementById("square"); 
 

 
const leftButton = document.getElementById("left"); 
 
leftButton.addEventListener("click",() => { 
 
    square.classList.remove("moveRight"); 
 
    square.classList.add("moveLeft"); 
 
}); 
 

 
const rightButton = document.getElementById("right") 
 
rightButton.addEventListener("click",() => { 
 
    square.classList.remove("moveLeft"); 
 
    square.classList.add("moveRight"); 
 
})

#square { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: blue; 
 
    margin-top: 20px; 
 
    position: relative; 
 
} 
 
    
 
.moveLeft { 
 
    animation: move 1s linear normal forwards; 
 
} 
 
    
 
.moveRight { 
 
    animation: move 1s linear reverse forwards; 
 
} 
 
    
 
@keyframes move { 
 
    from {left: 100px; opacity: 0.5;} 
 
    to {left: 0; opacity 1;} 
 
}

<input type="button" id="left" value="MOVE LEFT"> 
 
<input type="button" id="right" value="MOVE RIGHT"> 
 

 
<div id="square"></div>

Answer 1

你可以做到这一点，而无需使用transition的动画。

const square = document.getElementById("square"); 
 

 
const leftButton = document.getElementById("left"); 
 
leftButton.addEventListener("click",() => { 
 
    square.classList.remove("moveRight"); 
 
    square.classList.add("moveLeft"); 
 
}); 
 

 
const rightButton = document.getElementById("right") 
 
rightButton.addEventListener("click",() => { 
 
    square.classList.remove("moveLeft"); 
 
    square.classList.add("moveRight"); 
 
})

#square { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: blue; 
 
    margin-top: 20px; 
 
    position: relative; 
 
    transition: transform 1s, opacity 1s; 
 
} 
 
    
 
.moveLeft { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
} 
 
    
 
.moveRight { 
 
    transform: translateX(100px); 
 
    opacity: .5; 
 
}

<input type="button" id="left" value="MOVE LEFT"> 
 
<input type="button" id="right" value="MOVE RIGHT"> 
 

 
<div id="square"></div>