transition
is applied as soon as the page loads, which may not be ideal for your situation. Instead, you can utilize CSS @keyframes
to set scale(0,0)
to the class
, and then scale it to 1,1
at 100%
using keyframes after the page has fully loaded.
Demo (Code refactored with added animation-fill-mode
to prevent the popup from scaling back to 0
, revision 2)
.popOver {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
-webkit-animation: bummer 2s;
animation: bummer 2s;
-webkit-transform: scale(0,0);
transform: scale(0,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; /* Added to keep modal open after animation */
}
@-webkit-keyframes bummer {
100% {
-webkit-transform: scale(1,1);
}
}
@keyframes bummer {
100% {
transform: scale(1,1);
}
}
By setting the initial scale to 0,0
and animating to 1,1
using keyframes, you control the duration of the animation by adjusting the 2s
value (which represents 2 seconds).