I'm facing an odd yet simple issue. I have a div with the class navbaritem, and for some reason, the transition rule is being applied to the margin but not to the background.
Below is the HTML and CSS code snippet:
* {
font-family: Raleway, Century Gothic;
}
body {
margin: 0px;
}
a {
text-decoration: none;
color: #fff;
}
header > ul > li {
margin-bottom: 5vh;
}
.navbaritem {
position: absolute;
width: 30vw;
height: 6vh;
margin-left: -8vw;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
background: rgb(245, 246, 246);
background: -moz-linear-gradient(top, rgba(245, 246, 246, 1) 0%, rgba(219, 220, 226, 1) 21%, rgba(184, 186, 198, 1) 49%, rgba(221, 223, 227, 1) 80%, rgba(245, 246, 246, 1) 100%);
background: -webkit-linear-gradient(top, rgba(245, 246, 246, 1) 0%, rgba(219, 220, 226, 1) 21%, rgba(184, 186, 198, 1) 49%, rgba(221, 223, 227, 1) 80%, rgba(245, 246, 246, 1) 100%);
background: linear-gradient(to bottom, rgba(245, 246, 246, 1) 0%, rgba(219, 220, 226,
1) 21%, rgba(184, 186, 198, 1) 49%, rgba(221, 223, 227, 1) 80%, rgba(245, 246, 246, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f6f6', endColorstr='#f5f6f6', GradientType=0);
transition: 0.4s ease;
}
.navbaritem:hover {
margin-left: -3vw;
transition: 0.4s ease;
}
.navbaritem > a {
height: 80%;
margin-top: 1%;
margin-left: -10%;
width: 90%;
background: url(../img/graystripes.jpg);
box-shadow: inset 3vh 1vh 3vh #000;
-webkit-transform: skew(30 deg);
-moz-transform: skew(30 deg);
-o-transform: skew(30 deg);
position: absolute;
text-align: center;
font-size: 4 vh;
}
.navbaritem:hover {
transition: 0.4s ease;
background: rgb(255, 0, 0);
background: -moz-linear-gradient(top, rgba(255, 0, 0, 1) 0%, rgba(247, 0, 0, 1) 21%, rgba(137, 0, 0, 1) 49%, rgba(247, 0, 0, 1) 80%, rgba(255, 0, 0, 1) 100%);
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 1) 0%, rgba(247, 0, 0, 1) 21%, rgba(137, 0, 0, 1) 49%, rgba(247, 0, 0, 1) 80%, rgba(255, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 0, 0, 1) 0%, rgba(247, 0, 0, 1) 21%, rgba(137, 0, 0, 1) 49%, rgba(247, 0, 0, 1) 80%, rgba(255, 0, 0, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',
endColorstr='#ff0000', GradientType=0);
}
.navbaritem > i {
font-size: 5 vh;
color: #444;
margin-top: 1%;
margin-left: 85%;
-webkit-transform: skew(30 deg);
-moz-transform: skew(30 deg);
-o-transform: skew(30 deg);
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/hover.css">
<link type="text/css" rel="stylesheet" href="css/font-awesome.css">
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/classie.js"></script>
</head>
<body>
<header>
<ul>
<li>
<div class="navbaritem">
<a href="#">Home</a>
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="navbaritem">
<a href="#">Services</a>
<i class="fa fa-code"></i>
</div>
</li>
<li>
<div class="navbaritem">
<a href="#">Pricing</a>
<i class="fa fa-money"></i>
</div>
</li>
<li>
<div class="navbaritem">
<a href="#">References</a>
<i class="fa fa-flag"></i>
</div>
</li>
</ul>
<!--<div class="navbaritem">
<a href="#">Home</a>
<i class="fa fa-home"></i>
</div>-->
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>