这一节同样的代码，为什么鼠标出去的时候没有动画，而是一下子回到原始静态图
body,figure,figcaption,h2,p,img{margin: 0;padding: 0;}
figure{position: relative;width: 33.33%;overflow: hidden;height:300px;float: left;}
figcaption{position: absolute;top:0px;left:0px;color: #FFF;font-family: "微软雅黑";}
figure img{opacity: 0.7;transition:all 0.35s;} /*对应标签的所有属性都具有动画*/
figure figcaption p,h2,span,div{transition:all 0.35s;}
/*下面三段实现随浏览器尺寸变化，图片大小变化*/
@media screen and (min-width: 1001px){
figure{width: 33.33%}
}
@media screen and (min-width: 601px) and (max-width: 1000px){
figure{width: 50%}
}
@media screen and (max-width: 600px){
figure{width: 100%}
}
.test1{background: #2f0000;}
.test1 figcaption p{background: #FFF;color: #333;margin: 3px;text-align: center;transform: translate(-120px,0px);}
.test1 figcaption p:nth-of-type(1){transition-delay: 0.05s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.1s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.15s;}
.test1 figcaption {padding: 20px;}
.test1:hover figcaption p{transform: translate(0px,0px);} /*鼠标经过时p标签向左移动到0 0的位置*/
.test1:hover img{transform: translate(-50px,0px);opacity: 0.5;}
