Как сделать появляющуюся черту с анимацией в CSS?

Question

[Discout]

Как сделать черту, которая появлялась сверху бы при наведении курсора на пункт меню? Я сделал с помощью border-top: 5px solid #fff; но анимация выглядит не корректно - сдвигается сам пункт меню. Как это реализовать правильно?

p.s. страницу верстаю через bootstrap

Моя реализация:

Answer 1

[Андрей Голуменов]

Когда добавляете сверху border-top: 5px solid #fff;
Добавьте также свойство margin-top: -5px;

Либо можно изначально задавать
border-top: 5px solid transparent;
и при ховере указывать border-top: 5px solid #fff;

Comments

[Discout]

Спасибо за комментарий. Увы, ваш вариант также не помог от "дёрганой" анимации. Ниже я выложил часть своего css кода.

[Андрей Голуменов]

codepen.io/golumenov/pen/JGyeq держите

[Discout]

Спасибо, ваш код тоже подходит для такой анимации. Буду знать.

[Андрей Голуменов]

Обновил для :focus

Answer 2

[Евгений Петров]

1. У рамки сделать цвет transparent, тогда и рамка будет не видна, и прыгать при смене цвета не будет.
2. Можно использовать gradient, но накладно и не уверен в производительности.
3. Псевдоэлементы, но тут ещё большая засада — при анимации псевдообластей на мобильных устройствах могут появиться тормоза.

А вообще есть много подходов, включая совсем экзотические:)

Comments

[Discout]

Спасибо, transparent - почти то что нужно, но хочется понять, как можно сделать ту анимацию, что задумана. Я видел реализацию с помощью псевдоэллемента здесь: codepen.io/Discout/pen/CIrep , но я так и не смог это реализовать у себя. Я не понял, как заставить псевдоэлемент шириной 0px появляться.

[Евгений Петров]

@Discout не забыли поставить псевдообласти conent:""?) Покажите код, наверняка собака порылась неглубоко.

[Евгений Петров]

@Discout jsfiddle.net/petroveg/446w8

[Евгений Петров]

@Discout и модификация под верхний край jsfiddle.net/petroveg/446w8/1

[Discout]

@Petroveg Огромное вам спасибо! Я просто всё время забывал про самые последние строчки в вашем коде :)

Answer 3

[Trow_eu]

еще как вариант использовать box-shadow: inset - внутренюю тень.
либо без наведения - padding, при - убирать padding и добавлять border

Answer 4

[Discout]

Часть кода css для навигации:

/*all statement*/

.navbar-nav > li > a {
	color: #fff;
	font-size: 15px;
	font-family: 'Myriad Pro';
	color: rgb( 255, 255, 255 );
	text-transform: uppercase;
	padding-top: 35px;
	display: inline-block;

}

.navbar-default .navbar-nav > li > a {
	color: #fff;
	 -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

/*active statement*/

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background: none;
	color: #fff;
	padding-top: 30px;
	border-top: 5px solid #fff;

}

/*hover statement*/

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	background: none;
	color: #fff;
	padding-top: 30px;
	border-top: 5px solid #fff;
}

Comments

[Артур]

У вас "ГЛАВНАЯ" всегда выделена, кстати.

Answer 5

[ALEKSANDR Рукин]

Делам две полосы, одна в лево выдвигается , другая в право с замедлением за это отвечает animation-timing-function: ease;




/---------/
.hr__w{
width: 100%;
max-width: 1760px;
margin-left: 17%;
padding: 0px 0 0px;
position: relative;

}
.animation__left{
animation-name: move_l;
animation-duration: 4s;
animation-timing-function: ease;
}
@keyframes move_l {
0%{
right: -100%;
}
100%{
margin-right: 20px;}
to {
right: 0%;
}
}

.animation__right{
animation-name: move_r;
animation-duration: 3s;
animation-timing-function: ease;
}

.hr__w2{
width: 100%;
max-width: 1760px;
margin-right: 7%;
padding: 0px 0 0px;
position: relative;

}
@keyframes move_r {
0%{
left: -100%;
}
100%{
margin-right: 20px;}
to {
left: 0%;
}
}
(чтобы повторно выехала при косании)
.animation__right:hover {
animation-name: none;
}