Как анимировать пограничный эффект

Question

Когда вы наводите указатель мыши на «Войти, зарегистрируйтесь» на сайте acorns (https://www.acorns.com/), вы можете увидеть анимацию. Таким образом, у меня есть li

.navbar li{ 
    display: inline-block; 
    border-width:5px;  
    border-top-style:solid; 
    border-top-color: white; 

} 

.navbar li:hover, .navbar li:active{ 
    border-width:4px;  
    border-top-style:solid; 
    border-top-color: #e0b82b;} 

Как можно сделать анимированную рамку? Как показано выше. Спасибо.

http://jsfiddle.net/9mfccz6w/ Я пытаюсь анимировать верхнюю панель (желтый)

Answer 1

.navbar li { 
    display: inline-block; 
    border-width:5px;  
    border-top-style:solid; 
    border-top-color: white; 
    -webkit-transition: all .3s ease-in-out; 
      transition: all .3s ease-in-out; 
} 

.navbar li:hover { 
    -webkit-transform: translateY(-2px); 
     -moz-transform: translateY(-2px); 
     -ms-transform: translateY(-2px); 
     -o-transform: translateY(-2px); 
      transform: translateY(-2px); 
} 

Приведенный выше код будет оживить ваш Ли немного.

Посмотрите в CSS3 анимации: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Answer 2

Вы можете добавить CSS Tranistions к вашему стилю Li .navbar. Попробуйте этот код:

.navbar li{ 
    display: inline-block; 
    border-width:5px;  
    border-top-style:solid; 
    border-top-color: white; 
    -webkit-transition: all 0.5s ease;     
    -moz-transition: all 0.5s ease;     
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease;   
    transition: all 0.5s ease; 
} 

JSFiddle