CODEWITHSUNDEEP
javascripthtmlcss
Codex
Codex

Reputation: 11

How to use a JavaScript variable and pass to CSS to be use in keyframe animation

I want to set the x and y as a start position of the keyframe animation.. I'm a beginner in JavaScript ... hope that this is possible.

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);
    }

}

Thanks in advance

Upvotes: 0

Views: 191

Answers (1)

Sarath
Sarath

Reputation: 9156

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

Upvotes: 1

Related Questions