如何使用JavaScript變量並傳遞給CSS以用於關鍵幀動畫

Question

我想將x和y設置爲關鍵幀動畫的開始位置。 我是JavaScript的初學者...希望這個有可能。

JS：

var x = event.screenX; 
var y = event.screenY; 

$(".container").css({ 
    right : "x", 
    top: "y" 
}).addClass("openContainer"); 

CSS：

.openContainer { 
    height: 100vh; 
    background-color: black; 
    opacity: .8; 
    z-index:100; 
    animation: play 1s; 
    animation-iteration-count: 1; 
}  

@keyframes play { 
    0% { 
     transform: scale(0, 0); 
    } 
    25% { 
     transform: scale(.7, 1.1); 
    } 
    50% { 
     transform: scale(1.1,.9); 
    } 
    100% { 
     transform: scale(1, 1); 
    } 

}

在此先感謝

Answer 1

$(".container").css({ 
    right : x + "px", // its not "x" 
    top: y + "px" // its not "y" 
}).addClass("openContainer");