Есть ли способ сделать div видимым, сделав его видимым сверху, а затем опустившись вниз?

Question

Есть ли способ сделать div видимым, сделав его видимым сверху, а затем опустившись вниз? Пример:

#div {
visibility: hidden;
transition: visibility 1s (??);
}

#outerdiv:hover #div{
visibility: visible;
}

Answer 1

Да, вы можете, но вы не можете делать плавные переходы с опцией отображения, потому что у нее нет промежуточного состояния. Если вы хотите добиться исчезновения непрозрачности, вы должны использовать опцию css opacity и триггер для div, чтобы вызвать эти изменения. Код будет выглядеть следующим образом:

CSS:

div{
opacity: 0;
transition: 1s;
}

/*in this case I will use hover as the trigger*/
div:hover{
opacity:1;
}

С другой стороны, если вы хотите, чтобы div делал постепенное увеличение в момент загрузки сети, вам нужно будет создать функцию в js, которая будет вызываться в момент загрузки страницы, используя onload = "function ()".