在最新的google与firefox中，效果不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax练习</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->
<script src="js/jquery-1.9.1.min.js"></script>
<style type="text/css">
*{margin:0;padding: 0;}
figure{position:relative;float: left;width: 33%;height:600px;overflow: hidden;}
@media screen and (min-width: 1201px) {
figure{width: 33%;}
}
@media screen and (min-width: 801px) and (max-width: 1200px) {
figure{width: 50%;}
}
@media screen and (max-width: 800px) {
figure{width: 100%;}
}
figcaption{position: absolute;left: 50px;top: 50px;padding:20px;font-size: 24px;color: #fff;}
figure img{opacity: 0.8;transition: all 0.5s;}
figcaption p{transition:all .35s;}
.test1 figcaption p{transform: translate(-180px,0px);}
.test1:hover img{transform: translate(-50px,0px);opacity: 0.5}
.test1:hover figcaption p{transform: translate(0px,0px);}
.test1 figcaption p:nth-of-type(1){transition-delay:0.1s;-webkit-transition-delay:0.1s;}
.test1 figcaption p:nth-of-type(2){transition-delay:0.2s;-webkit-transition-delay:0.2s;}
.test1 figcaption p:nth-of-type(3){transition-delay:0.3s;-webkit-transition-delay:0.3s;}
</style>
</head>
<body>
<div>在谷歌浏览器中，当鼠标滑入时，时不时的会出现3个P标签的文字滑动效果消失。而在firefox中效果与老师讲的完全一样</div>
<div>
<figure>
<img src="images/11.jpg" alt="1">
<figcaption>
<h2>图片标题</h2>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
</figcaption>
</figure>
<figure>
<img src="images/12.jpg" alt="2">
<figcaption>
<h2>图片标题</h2>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
</figcaption>
</figure>
<figure>
<img src="images/13.jpg" alt="3">
<figcaption>
<h2>图片标题</h2>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
</figcaption>
</figure>
</div>
</body>
</html>
