I am trying to maintain the body size at its initial state, without allowing any changes caused by elements that resize during animations. How can I achieve this?
body {
height: initial; /* Unfortunately, this approach does not work */
}
Even setting a fixed height like this does not work:
body {
height: 200vh;
}
EDIT - Here is the animation code snippet:
.small-logo img { /* This class is toggled in JS*/
height: 40px;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: shrink 1s ease;
animation-iteration-count: 1;
}
@keyframes shrink {
0% {
height: 100px;
top: -100px;
opacity: 10%;
}
100% {
height: 40px;
top: 0px;
opacity: 100%;
}
}