CSS: анимация с полосой прокрутки? ⇐ CSS

[Anonymous]

Первая попытка использовать CSS-анимацию. Это всего лишь простая HTML-страница с историей. Я просто хотел добавить простую анимацию стекания по странице, и она у меня отлично работает, но по какой-то причине код анимации мешает моему коду полосы прокрутки. Итак, когда я пытаюсь открыть страницу в Chrome, нет полосы прокрутки и нет возможности прокрутить страницу вниз. Предполагается только вертикальная полоса прокрутки. В чем проблема? Есть ли проблема с анимацией на прокручиваемой странице?
Вот мой код, CSS:
body{
margin: 0;
padding: 0;
overflow: hidden;

}
section{
position: absolute;
width: 100%;
height: 100vh;
background: url(redgothpeg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.blooddrops{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.blooddrops div{
position: absolute;
display: block;
filter: brightness(40%);

}
.blooddrops div:nth-child(1){
left: 2%;
animation: animate 1s linear infinite;
animation-delay: -5s;
}
.blooddrops div:nth-child(2){
left: 5%;
animation: animate 1.2s linear infinite;
animation-delay: -3s;
}
.blooddrops div:nth-child(3){
left: 21%;
animation: animate 1.4s linear infinite;
animation-delay: -2s;
}
.blooddrops div:nth-child(4){
left: 13%;
animation: animate 1.6s linear infinite;
animation-delay: -1s;
}
.blooddrops div:nth-child(5){
left: 45%;
animation: animate 1.7s linear infinite;
animation-delay: -3s;
}
.blooddrops div:nth-child(6){
left: 92%;
animation: animate 1.9s linear infinite;
animation-delay: -4s;
}
.blooddrops div:nth-child(7){
left: 9%;
animation: animate 1.3s linear infinite;
animation-delay: -2s;
}
.blooddrops div:nth-child(8){
left: 19%;
animation: animate 1.2s linear infinite;
animation-delay: -5s;
}
.blooddrops div:nth-child(9){
left: 29%;
animation: animate 1.4s linear infinite;
/* animation-delay: -1s; */
}
.blooddrops div:nth-child(10){
left: 39%;
animation: animate 1.6s linear infinite;
/* animation-delay: -3s; */
}
.blooddrops div:nth-child(11){
left: 49%;
animation: animate 1.4s linear infinite;
animation-delay: -2s;
}
.blooddrops div:nth-child(12){
left: 52%;
animation: animate 1.7s linear infinite;
/* animation-delay: -2s; */
}
.blooddrops div:nth-child(13){
left: 69%;
animation: animate 1.5s linear infinite;
animation-delay: -3s;
}
.blooddrops div:nth-child(14){
left: 79%;
animation: animate 1.8s linear infinite;
/* animation-delay: -4s; */
}
.blooddrops div:nth-child(15){
left: 89%;
animation: animate 1.1s linear infinite;
animation-delay: -1s;
}
.blooddrops div:nth-child(16){
left: 72%;
animation: animate 1.3s linear infinite;
/* animation-delay: -4s; */
}
.blooddrops div:nth-child(17){
left: 82%;
animation: animate 1s linear infinite;
/* animation-delay: -2s; */
}
.blooddrops div:nth-child(18){
left: 62%;
animation: animate 1.6s linear infinite;
animation-delay: -4s;
}
@keyframes animate{
0%{
top: -10%;

}
100%{
top: 110%;

}
.set2:
transform: scale(2.5);
filter: blur(3px);
filter: brightness(40$);
}

HTML:







:root{
scrollbar-color: #ac5dfb #3c3c3c;
scrollbar-width: thin;
}
body {
background-color: #FFFF;
background-position:center;
/* background-image:url(gothicpegHDghost.jpg); */
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/*overflow:scroll;*/

}
body p {
color: #FFF;
}
::-webkit-scrollbar {
width: 6px;
height: 60px;
background-color: #3C3C3C;
opacity: 0.25;
}

::-webkit-scrollbar-thumb {
background-color: #ac5dfb;
border-radius: 8px;
opacity: 0.5;
}
body p {
font-family: Bradley Hand ITC;
}
body p {
/*color: #ac5dfb;*/
color: #9c5dfb;
text-shadow: 2px 2px 4px #000000;
/*text-shadow: 2px 4px 8px #306;*/
-webkit-text-stroke: 0.5px #9a53e1;
}

}



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