Помогите сделать анимацию

Здравствуйте. Помогите сделать такую же анимацию кнопки справа в хедере, как тут: https://www.doubleclickbygoogle.com
Кнопка плавно появляется при пролистывании страницы. Как достичь такого же эффекта появления кнопки? Интересуют именно сама анимация. Какие СSS свойства меняются?

 

Странно, вроде ссылка рабочая...
--- Добавлено ---
Перефразирую вопрос: как плавно развернуть блок по горизонтали или вертикали при помощи CSS?

 

Спасибо, да. Немного поправил:

Код (Text):

1. div {
2.     width: 10px;
3.     height: 100px;
4.     background: red;
5.     transition: 0.5s;
6.     overflow: hidden;
7.     text-align: center;
8.     line-height: 100px;
9.     color: red;
10. }
11.  
12. div:hover {
13.     width: 300px;
14.     color: #fff;
15. }

--- Добавлено ---

Спасибо, да. Немного поправил:

Код (Text):

1. div {
2.     width: 10px;
3.     height: 100px;
4.     background: red;
5.     transition: 0.5s;
6.     overflow: hidden;
7.     text-align: center;
8.     line-height: 100px;
9.     color: red;
10. }
11.  
12. div:hover {
13.     width: 300px;
14.     color: #fff;
15. }

--- Добавлено ---

Я тоже про нее

 

Делал вот так:

Код (Text):

1. $(window).scroll(function() {
2. if ($(this).scrollTop() > 17){
3.      $('header').addClass("sticky");
4.    }
5.    else {
6.      $('header').removeClass("sticky");
7.    }
8.  
9. });