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>