CSS 전환이 흔들림

Question

내 탐색 표시 줄에 문제가 있습니다. 색상 전환 효과를 추가했지만 텍스트 위로 가져 가면 텍스트가 흔들립니다. 브라우저 (Chrome)를 확대 또는 축소 한 후에 나타납니다. "흔들림"이 일정하게 나타나지 않습니다. 여기

@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); 
 
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300); 
 

 
@font-face { 
 
\t font-family: 'BebasNeuewebfont'; 
 
\t src: url('../fonts/BebasNeuewebfont.eot'); 
 
\t src: local('../fonts/BebasNeuewebfont'), url('../fonts/BebasNeuewebfont.woff') format('woff'), url('../fonts/BebasNeuewebfont.ttf') format('truetype'); 
 
} 
 
body { 
 
\t background-color: #eee !important; 
 
} 
 
/* Navbar*/ 
 
.navbar { 
 
\t background-color: #fff !important; 
 
\t padding-top: 6px; 
 
} 
 
.navbar .navbar-nav>.active>a:hover,.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus { background-color: #4375D7} 
 
.navbar .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover, 
 
.navbar .navbar-nav>.open>a:focus { background-color: #4C89FF} 
 
.dropdown-menu { 
 
\t background-color: #fff !important; 
 
} 
 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #4375D7} 
 
.navbar { background-image: none; } 
 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; } 
 
.navbar { border-color: #353739} 
 
.navbar .navbar-brand { 
 
\t color: #4C89FF !important; 
 
} 
 
.navbar .navbar-brand:hover { color: #4375D7} 
 
.navbar .navbar-nav>li>a { color: #B0B0B0} 
 
.navbar .navbar-nav>li>a:hover, .navbar .navbar-nav>li>a:focus { color: #353739} 
 
.navbar .navbar-nav>.active>a,.navbar .navbar-nav>.open>a, .navbar .navbar-nav>.open>a:hover, .navbar .navbar-nav>.open>a:focus { 
 
\t background-color: #fff !important; 
 
} 
 
.navbar .navbar-nav>.active>a:hover, .navbar .navbar-nav>.active>a:focus { color: #353739} 
 
.dropdown-menu>li>a { color: #B0B0B0} 
 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #fff} 
 
.navbar{ /* assigning the top bar to the entire navbar div element */ 
 
    text-align: center; 
 
    box-shadow: inset 0px 6px 0px #4C89FF; 
 
\t 
 
\t /* initial light-blue color to the top bar */ 
 
} 
 
.navbar .navbar-nav > .active > a, 
 
.navbar .navbar-nav > .active > a:hover, 
 
.navbar .navbar-nav > .active > a:focus { 
 
    color: #000; 
 
    background: #4C89FF; 
 
\t margin-top: -6px; 
 
\t padding-top: 21px; 
 
    box-shadow: inset 0px 6px 0px #75A4FF; 
 
\t 
 
\t -webkit-backface-visibility: hidden; 
 
\t -webkit-transform: translateZ(0) scale(1.0, 1.0); 
 
\t 
 
\t /* switch to a lighter color for active element */ 
 
} 
 

 
.navbar .navbar-nav > li > a:hover, 
 
.navbar .navbar-nav > li > a:focus { 
 
    color: #000; 
 
    background-color: #fff; 
 
\t margin-top: -6px; 
 
\t padding-top: 21px; 
 
    box-shadow: inset 0px 6px 0px #3c6dcc; 
 
\t 
 
\t -webkit-transition: all 0.3s ease-in-out; 
 
    \t -o-transition: all 0.3s ease-in-out; 
 
    \t -moz-transition: all 0.3s ease-in-out; 
 
    \t -ms-transition: all 0.3s ease-in-out; 
 
    -kthtml-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
\t 
 
\t /* switch to a darker-blue color on hover */ 
 
} 
 

 
.navbar-brand { 
 
    font-family: 'BebasNeuewebfont' !important; 
 
    font-size: 40px !important; 
 
    letter-spacing: 2px; 
 
    font-weight: 400 !important; 
 
\t 
 
\t -webkit-backface-visibility: hidden; 
 
\t -webkit-transform: translateZ(0) scale(1.0, 1.0); 
 
\t 
 
} 
 

 
.navbar-brand:hover, 
 
.navbar-brand:focus { 
 
    box-shadow: inset 0px 6px 0px #3c6dcc; /* switch to a darker color on hover */ 
 
\t margin-top: -6px; 
 
\t padding-top: 21px; 
 
\t padding-bottom: 35px; 
 
\t 
 
\t -webkit-transition: all 0.4s ease-in-out; 
 
    \t -o-transition: all 0.4s ease-in-out; 
 
    \t -moz-transition: all 0.4s ease-in-out; 
 
    \t -ms-transition: all 0.4s ease-in-out; 
 
    -kthtml-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
\t 
 
} 
 

 
.navbar a { 
 
    font-family: 'Quicksand', sans-serif; 
 
    font-weight: 600; 
 
} 
 

 
.navbar .navbar-toggle { 
 
    border-color: #333; 
 
    padding-top: 6px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="shortcut icon" type="image/jpg" href="#"> 
 
    <meta charset="utf-8"> 
 
\t 
 
<!-- fonts --> 
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css"> 
 
<!-- Stylesheets --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 

 
<!-- Navbar --> 
 
<header class="navbar navbar-fixed-top bs-docs-nav" role="banner"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="index.html" class="navbar-brand active">Brand</a> 
 
    </div> 
 
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Text</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 
</body> 
 
<!-- JQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<!-- JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 
 
</html>

프로젝트에 대한 링크입니다 :

http://jsfiddle.net/XENONFFM/0yygc5q5/

Answer 1

당신이 상자 그림자없이 상자 그림자 (0 픽셀)에서 애니메이션 있기 때문에 그것은 들썩 (6px).

이 경우 개인적으로 border 속성을 box-shadow 이상 사용합니다. 여기에서해야 할 중요한 일은 미리 테두리/상자 그림자를 정의하는 것입니다 만 표시하지는 않습니다. 그렇게하기 위해 색상을 투명하게 설정할 수 있으며, 마우스를 올리면 원하는 색상으로 설정할 수 있습니다. 여기

는 무엇을해야하는지의 일부 의사 코드입니다 :

당신이 box-shadow를 계속 사용하려면

header { 
 
    border-top: 5px solid purple; 
 
} 
 
ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    float: left; 
 
    margin: -5px; 
 
    padding: 15px 25px; 
 
    border-top: 5px solid transparent; 
 
    transition: all 300ms ease-in-out; 
 
} 
 
li:hover { 
 
    border-top: 5px solid yellow; 
 
}

<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Link 1</a> 
 
     </li> 
 
     <li><a href="#">Link 2</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

이 가져가 선택기 ( .navbar .navbar-nav > li > a:hover)에서 margin, padding 및 box-shadow 속성을 복사로 링크 선택기 ( .navbar .navbar-nav > li > a)를 클릭하고 색을 transparent으로 설정합니다.