Почему не работает анимация transition у блока?

Question

[Денис Машанов]

Почему не работает transition?

position: relative; /* положение */
    margin:auto; /*позиция по центру*/
    width: 30px; /* ширина блока */
    height: 30px; /* высота блока */
     background-image: url(/img_menu/search-btn.png);
    background-position: center;
    background-size: 27px 32px;
    background-repeat: no-repeat;
    background-color: rgba(230, 230, 250, 0.5);
    -webkit-transition-duration: 0.2s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    transition-delay: 0.1s;

А вот это работает почему-то

position: fixed; /* положение */
    right: 0; /* отступ слева */
    width: 30px; /* ширина блока */
    height: 30px; /* высота блока */
    background-image: url(/img_menu/menu-btn.png);
    background-position: center;
    background-size: 27px 32px;
    background-repeat: no-repeat;
    background-color: rgba(230, 230, 250, 0.5);
    -webkit-transition-duration: 0.2s; /* анимационное выдвижение для всех браузеров*/
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    transition-delay: 0.1s;

Вот пример

Comments

[Сергей delphinpro]

codepen.io/delphinpro/pen/bqjjrO?editors=1100

[Денис Машанов]

Сергей: Спасибо Вам огромное)

Answer 1

[Денис Машанов]

Оказывается в search я забыл написать "top: 0;" :D
Помог мне в этом Сергей