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

Question

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

Finish your question and format it properly, then you might get help — Igl3
– Igl3, Commented Dec 17, 2013 at 7:35

Sarath · Accepted Answer · 2013-12-17 07:37:01Z

1

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

answered Dec 17, 2013 at 7:37

Sarath

9,16612 gold badges55 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related