XENONFFM XENONFFM - 1 year ago 78
CSS Question

Css transition shaking

I have a problem with my navbar.
I have added a color-transition effect but the text shakes if I hover over it. It appears after I zoomed the browser (Chrome) in or out. The "shaking" does not appear constant.

@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 {
font-family: 'BebasNeuewebfont';
src: url('../fonts/BebasNeuewebfont.eot');
src: local('../fonts/BebasNeuewebfont'), url('../fonts/BebasNeuewebfont.woff') format('woff'), url('../fonts/BebasNeuewebfont.ttf') format('truetype');
body {
background-color: #eee !important;
/* Navbar*/
.navbar {
background-color: #fff !important;
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 {
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 {
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 {
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;

/* 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;
margin-top: -6px;
padding-top: 21px;
box-shadow: inset 0px 6px 0px #75A4FF;

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

/* 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;
margin-top: -6px;
padding-top: 21px;
box-shadow: inset 0px 6px 0px #3c6dcc;

-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-kthtml-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

/* 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;

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);


.navbar-brand:focus {
box-shadow: inset 0px 6px 0px #3c6dcc; /* switch to a darker color on hover */
margin-top: -6px;
padding-top: 21px;
padding-bottom: 35px;

-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-kthtml-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;


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

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

<!DOCTYPE html>
<link rel="shortcut icon" type="image/jpg" href="#">
<meta charset="utf-8">

<!-- 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">


<!-- 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>
<a href="index.html" class="navbar-brand active">Brand</a>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="#">Text</a></li>
<!-- 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>

Here is the link to the project:


Answer Source

It shakes because you're animating from no box-shadow (0px) to a box-shadow (6px).

Personally I would use the border property over box-shadow in this situation. The main thing to do here is define the border/box-shadow ahead of time but don't display it. To do that you can set the color to transparent, then when you hover you set it to the color you want.

Here's some pseudo code of what to do:

header {
  border-top: 5px solid purple;
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;
      <li><a href="#">Link 1</a>
      <li><a href="#">Link 2</a>

If you want to keep using box-shadow copy your margin, padding and box-shadow properties from your hover selector (.navbar .navbar-nav > li > a:hover) to your link selector (.navbar .navbar-nav > li > a) and set the color to transparent.