我正在做我的css3动画，在我看到测试之后，当你在firefox中时它的动画很清晰，但是在chrome动画中它不起作用。 我的代码在那里： 谢谢。 （如果单击链接，您可能会看到某些内容（在chrome中）。
http://jsfiddle.net/w6dnndqh/4/
HTML
<div id="container">
<div id="menu">
<a href="#"><div class="logo"></div></a>
<ul class="social">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="content" class="gallery">
<div id="center" class="col-md-10">
<div id="header">
<h1>Gallery</h1>
<span id="underline"></span>
<ul class="gallery-menu">
<li><a href="#">EVENTS</a></li>
<li><a href="#">PERSONAL</a></li>
<li><a href="#">WEDDINGS</a></li>
</ul>
</div>
<div id="photos" class="col-md-12 ">
<div class="photo tall one"></div>
<div class="photo small two">
<div class="photo-small-one"></div>
<div class="photo-small-two"></div>
</div>
<div class="photo small three">
<div class="photo-small-three"></div>
<div class="photo-small-four"></div>
</div>
<div class="photo tall four"></div>
</div>
</div>
</div>
</div>
CSS
body{
margin: 0;
padding: 0;
}
#container{
position: absolute;
top: 0;
left:0;
width: 100%;
overflow: hidden;
}
#menu{
float: left;
width: 280px;
height: 100vh;
background-color: #181818;
color: white;
border-right:3px solid white;
}
#menu .logo{
margin: 0 auto;
background:url("..//img/icon-h&h-logo.png");
background-size: 160px 120px;
background-repeat: no-repeat;
clear: both;
width: 160px;
height: 120px;
cursor: pointer;
}
#menu ul.menu {
position: relative;
top:40px;
width: 100%;
left: -40px;
}
#menu ul.menu li a{
text-decoration: none;
position: relative;
left: 30px;
color: white;
display: block;
width: 247px;
padding-left: 20px;
padding-right: 20px;
z-index: 10;
}
#menu ul.menu li{
list-style-type: none;
font-size: 18pt;
width: 277px;
font-family: "timeburnerregular" , sans-serif;
padding:3px 0px;
position: relative;
z-index: 10;
color: white;
}
#menu ul.menu li a:before{
position: absolute;
z-index: -1;
content:"";
width: 0%;
height: 40px;
color: white;
background-color: #181818;
display: block;
right:0px;
top:-5px;
}
#menu ul.menu li a:hover:before{
background-color: white;
-webkit-animation-name: slide;
animation-name: slide;
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#menu ul.menu li a:hover{
color:black;
-webkit-animation-name:color;
animation-name:color;
-webkit-animation-duration:.6s;
animation-duration:.6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes slide{
from{width: 0%;}
to{width: 100%;}
}
@keyframes slide{
from{width: 0%;}
to{width: 100%;}
}
@keyframes color{
from{color: white;}
to{color: black;}
}
@-webkit-keyframes color{
from{color: white;}
to{color: black;}
}
#menu ul.social{
list-style-type: none;
position: absolute;
bottom: 10px;
left: -28px;
}
#menu ul.social li{
display: inline;
width: 36px;
height: 36px;
margin:5px;
cursor: pointer;
}
#menu ul.social li:nth-child(1){
background:url("..//img/icon-facebook.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.1s all ease-in-out;
transition:.1s all ease-in-out;
}
#menu ul.social li:nth-child(1):hover{
background:url("..//img/icon-facebook-color.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.3s all ease-in-out;
transition:.3s all ease-in-out;
}
#menu ul.social li:nth-child(2){
background:url("..//img/icon-twitter.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.1s all ease-in-out;
transition:.1s all ease-in-out;
}
#menu ul.social li:nth-child(2):hover{
background:url("..//img/icon-twitter-color.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.3s all ease-in-out;
transition:.3s all ease-in-out;
}
#menu ul.social li:nth-child(3){
background:url("..//img/icon-google+.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.1s all ease-in-out;
transition:.1s all ease-in-out;
}
#menu ul.social li:nth-child(3):hover{
background:url("..//img/icon-google+-color.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.3s all ease-in-out;
transition:.3s all ease-in-out;
}
#menu ul.social li:nth-child(4){
background:url("..//img/icon-instagram.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.1s all ease-in-out;
transition:.1s all ease-in-out;
}
#menu ul.social li:nth-child(4):hover{
background:url("..//img/icon-instagram-color.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.3s all ease-in-out;
transition:.3s all ease-in-out;
}
#menu ul.social li:nth-child(5){
background:url("..//img/icon-youtube.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.1s all ease-in-out;
transition:.1s all ease-in-out;
}
#menu ul.social li:nth-child(5):hover{
background:url("..//img/icon-youtube-color.png");
background-size: cover;
width: 36px;
height: 36px;
display: inline-block;
-webkit-transition:.3s all ease-in-out;
transition:.3s all ease-in-out;
}
/* ABOUT ------*/
#content{
float: left;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 280px;
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
}
#content.about{
background:url("..//img/image-bg.jpg");
}
#content:after{
content: "";
background:url("..//img/pattern.gif");
opacity: .3;
filter: alpha(opacity=30);
}
#about{
width: 88%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-webkit-flex-direction:row;
-ms-flex-direction:row;
flex-direction:row;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
padding: 0;
position: relative;
}
#about .photo{
background:url("..//img/image-photographer.jpg");
background-size: cover;
background-position: top;
background-repeat: no-repeat;
width: 300px;
height: 360px;
float: left;
position: relative;
z-index: 10;
}
#about .photo:after{
content: "";
height: 400px;
position: relative;
width: 300px;
z-index: 1;
top: -20px;
display: block;
}
#about .text{
float: left;
background-color:white;
max-width: 700px;
height: 300px;
position: relative;
font-family: "timeburnerregular",sans-serif;
padding-left: 45px;
}
#about .text h2.hello{
font-size: 32pt;
}
#about .text h1{
font-size: 20pt;
line-height: 1.2em;
color:#646464;
word-wrap: break-word;
}
#about .text a{
text-decoration: none;
color: white;
}
#about .text h1 b{
color: #323232;
}
#about .text h2.iwas{
font-size: 20pt;
padding-top: 10px;
font-family: "timeburnerregular",sans-serif;
}
#about .contact-text{
position: relative;
height: 100px;
left:100px;
background-color: #2c2c2c;
color:white;
}
#about .contact-text img{
float: left;
width: 72px;
height: 72px;
position: relative;
top:9px;
}
#about .contact-text a,
#about .contact-text p{
float: left;
font-size: 18pt;
font-family: "timeburnerregular",sans-serif;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
height: 100%;
-webkit-transition:.8s all ease-in-out;
}
#about .contact-text a:after{
content: "";
position: absolute;
bottom: 30%;
left: 45%;
height: 2px;
background-color: white;
width: 0%;
margin:0 auto;
-webkit-transition:.3s all ease-in-out;
}
#about .contact-text a:hover:after{
-webkit-animation-name: underline;
-webkit-animation-duration:1s;
-webkit-transition:.8s all ease-in-out;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes underline{
from{width: 0%;}
to{width: 45%;}
}
#about .contact-text span#vertical-line{
float: left;
display: block;
width: 1px;
height: 60%;
background-color: white;
position: relative;
top:18px;
margin: 0px 20px;
}
/*GALLERY*/
.gallery{
background:url("..//img/image-bg-gallery.jpg");
}
#content #center{
height: 100%;
}
#content #center #header{
text-align: center;
font-family: "timeburnerregular",sans-serif;
color: white;
position: relative;
top:100px;
}
#content #center #header h1{
font-size: 32pt;
}
#header span#underline{
display: block;
width: 600px;
height: 1px;
background-color: white;
margin: 0 auto;
margin-bottom: 20px;
}
ul.gallery-menu{
list-style-type: none;
}
ul.gallery-menu li{
display: inline;
padding: 20px 30px;
font-size: 16pt;
font-family: "Arial",sans-serif;
position: relative;
}
ul.gallery-menu li a:before{
content: "";
position: absolute;
top: -24px;
left: -20px;
width: 150px;
height: 0;
background-color: white;
z-index: -1;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
ul.gallery-menu li a:hover:before{
background-color: orange;
height: 80px;
-webkit-animation-name: slideDown;
animation-name: slideDown;
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
ul.gallery-menu li a:hover{
color:black;
-webkit-animation-name:colortwo;
animation-name:colortwo;
-webkit-animation-duration:.1s;
animation-duration:.1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes slideDown{
from{height: 0%;}
to{height: 80px;}
}
@keyframes slideDown{
from{height: 0%;}
to{height: 80px;}
}
@keyframes colortwo{
from{color: white;}
to{color: black;}
}
@-webkit-keyframes colortwo{
from{color: white;}
to{color: black;}
}
ul.gallery-menu li a{
text-decoration: none;
color: black;
position: relative;
z-index: 2;
}
#content #center #photos{
height: 100%;
position: relative;
top: 30%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
}
#content #center #photos .one{
background:url("..//img/image-grill1.jpg");
background-size:cover;
background-position: center;
background-repeat: no-repeat;
width: 300px;
height: 400px;
float: left;
}
#photos .photo{
margin:2px;
}
#photos .two{
height: 400px;
width: 300px;
box-sizing:border-box;
float: left;
}
#photos .two .photo-small-one{
background: url("..//img/image-plate.jpg");
background-size:cover;
background-position: center center;
background-repeat: no-repeat;
height: 50%;
width: 100%;
}
#photos .two .photo-small-two{
background: url("..//img/image-meadow.jpg");
background-size:cover;
background-position: center center;
background-repeat: no-repeat;
height: 50%;
width: 100%;
}
#photos .three{
height: 400px;
width: 300px;
box-sizing:border-box;
float: left;
}
#photos .three .photo-small-three{
background: url("..//img/image-meadow1.jpg");
background-size:cover;
background-position: center center;
background-repeat: no-repeat;
height: 50%;
width: 100%;
}
#photos .three .photo-small-four{
background: url("..//img/image-trophies.jpg");
background-size:cover;
background-position: center center;
background-repeat: no-repeat;
height: 50%;
width: 100%;
}
#content #center #photos .four{
background:url("..//img/image-portrait.jpg");
background-size:cover;
background-position: center;
background-repeat: no-repeat;
width: 300px;
height: 400px;
float: left;
}
/* OPTIMALIZE FOR MOBILES*/
@media only screen and (max-width: 1100px){
#menu{
float: none;
height: auto;
width: 101%;
}
#menu ul.menu{
left:0;
top:0;
}
#menu ul.menu li{
position: static;
margin:0 auto;
}
#menu ul.social{
left:-1%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
background-color: black;
width: 100%;
bottom: 0;
padding-right: 30px;
position: absolute;
z-index: 10;
}
#menu ul.social li{
margin: 5px 20px;
}
#content{
position: static;
overflow: hidden;
}
#content #center{
height: 80vh;
}
#content #center #photos{
height: auto;
}
}