CSS - переход для переполнения?

Question

У меня есть «футер» с некоторым прокручиваемым контентом с «overflow-y». Все остальное на странице очень плавно анимировано с переходами CSS, но по мере того, как полоса прокрутки появляется в нижнем колонтитуле только при наведении курсора, это выглядит действительно глупо, когда у него нет перехода. Взгляд here. Есть ли способ сделать для него плавный переход?

CSS:

footer 
{ 
    background-color:#333333; 
    position:fixed; 
    height:4%; 
    bottom: 0px; 
    margin-bottom: 0px; 
    width:100%; 
    text-align: right; 
    transition: all ease 1.1s; 
    color: white; 
    background-image:url('world1.gif'); 
    background-repeat:no-repeat; 
    background-position: right bottom ; 
    background-size: contain; 
    overflow-y: hidden; 
} 

footer:hover { 
height: 400px; 
opacity: 0.95; 
overflow-y: auto; 
} 

Answer 1

Вы можете сделать что-то вроде этого и поместить DIV, чтобы скрыть полосу прокрутки. Его взломанные, но полосы прокрутки на самом деле не должны быть анимированы.

http://jsfiddle.net/ttgB8/

footer, 
.cover-scroll{ 
    position:fixed; 
    bottom: 0px; 
    transition: all ease 1.1s; 
    height:4%; 
} 

footer { 
    width:99%; 
    overflow-y: auto; 
} 

footer:hover { 
    opacity: 0.95; 
    height: 400px; 
} 

.cover-scroll{ 
    background: #fff; 
    width: 40px; 
    right: 0px; 
    outline: 1px solid red; 
    bottom: 0; 
    z-index: 20; 
} 

.cover-scroll:hover, 
footer:hover .cover-scroll{ 
    opacity: 0; 
    visibility: hidden; 
    height: 400px; 
} 

В качестве альтернативы вы можете осуществлять поиск пользовательских-ScrollBar-плагинов, таких как iScroll и тому подобное.