Временная ошибка перехода CSS

Question

Я пытаюсь воссоздать переход, увиденный здесь - http://piccsy.com/investors - Это баннер в правой части страницы, который перемещается по мыши. В нем говорится «Резюме».

Вот что у меня есть. Я близок, но просто не могу, кажется, это ТОЧНО то же самое. По какой-то причине текст внутри контейнера перемещается прерывистым, в отличие от контейнера, который является гладким.

http://jsfiddle.net/fuwLeye0/

<div id="executive-summary-bar" style="text-align: center;"> 
<a href="#executive-summary">Executive Summary </a></div> 

#executive-summary-bar a{color:#ffffff; height:20px; margin-top:-5px;}  
#executive-summary-bar a:hover{color:#ffffff;} 

#executive-summary-bar { 
    height:20px; 
    line-height: 1.2; 
    background: none repeat scroll 0 0 #373435; 
    color: #ffffff; 
    font-size: 0.8em; 
    margin-top: -10px; 
    padding: 32px 3px 7px; 
    position: absolute; 
    text-align: center; 
    top: 0; 
    width: 68px; 
    transition: height 1s; 
    -moz-transition: height 1s; /* Firefox 4 */ 
    -webkit-transition: height 1s; /* Safari and Chrome */ 
    -o-transition: height 1s; /* Opera */ 
    -ms-transition: height 1s; /* IE9 (maybe) */ 
}  
#executive-summary-bar:hover{ 
    height:35px; 
    padding: 46px 3px 7px; 
}  
#executive-summary-bar:after{ 
    border-left: 37px solid transparent; 
    border-right: 37px solid transparent; 
    border-top: 36px solid #373435; 
    content: ""; 
    left:0; 
    position: absolute; 
    top:100%; 
    width: 0; 
} 

div#executive-summary-bar { 
    //right: 50px; 
    //top: -40px; 
} 

Answer 1

Текст позиции в вашем <div/> контролируется padding-top, но вы только анимировать height. Если вы добавите padding-top в свои объявления о переходе, you get the desired effect.

transition: height 1s, padding-top 1s;