Reputation: 11
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
Reputation: 9156
$(".container").css({
right : x + "px", // its not "x"
top: y + "px" // its not "y"
}).addClass("openContainer");
Upvotes: 1