Анимированный SVG не достигает нижней части контейнера ⇐ CSS

[Anonymous]

Привет всем и спасибо за то, что вы здесь, давайте посмотрим, сможете ли вы уточнить, что здесь не так: < /p>
Я пытаюсь добавить простую анимацию снежинки, падающей сверху вниз в контейнере:
здесь ссылка: песочница < /p>

Код: Выделить всё

import "./styles.css";
const seasonArray = ["winter", "summer", "autumn"];
const getSeasonValue = (season) => {
switch (season) {
case "winter":
return winter;
case "autumn":
return autumn;
case "summer":
return summer;
default:
return summer;
}
};

const StyledButton = styled.button`
border: 1px solid black;
border-radius: 10px;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
max-width: 33%;
position: relative;
min-width: 30%;
height: 20%;
`;

const StyledButtonsWrapper = styled.div`
display: flex;
justify-content: space-between;
height: 100vh;
`;
export default function App() {
return (

{seasonArray.map((season) => {
return (


{season.charAt(0).toUpperCase()}
{season.substring(1)}

);
})}

);
}
const StyledSvg = styled.svg`
position: absolute;
top: 0;
width: 100%
height: 100%;
animation: snowFlake 2s ease-in-out infinite;

@keyframes snowFlake {
0% {
transform:  translateY(0);
}
50% {
transform:translateY(50%);
}
100% {
transform:  translateY(100%);
}
}
`;

const SnowFlakeIcon = () => {
return (














);
};

Я считаю, что высота 100% на моем styledsvg означает 100% его собственной высоты, однако я, кажется, не могу справиться с этим для всего родителя.
Что я здесь не получаю?>

Подробнее здесь: https://stackoverflow.com/questions/795 ... -container