文字退出的时候不像进入的时候一个一个进入，是一起退出的。

figure{width: 33.33%; height: 400px; float:left; overflow: hidden; padding: 0px; position: relative;}

figure figcaption{position: absolute; left: 0px; top: 0px;}

figure  img{transition: all .35s; opacity: 0.8;}

figure figcaption p,figure figcaption h2,figure figcaption span ,figure figcaption div{transition: all .35s;}

@media screen and  (max-width: 600px) {

   figure{width: 100%;} 

}

@media screen and (min-width: 601px) and (max-width: 1000px) {

   figure{width: 50%;} 

}

@media screen and ( min-width: 1001px;) {

 figure{width: 33.33%;} 

}

.test1{ background: #f00; }

.test1 figcaption{padding: 20px}

.test1  figcaption p{ background:#fff; color: #f00;margin:5px; text-align:center; transform: translate(-120px ,0px);}

.test1:hover figcaption p{transform:translate(0px,0px)}

.test1:hover figcaption p:nth-of-type(1){transition-delay: 0.05s;}

.test1:hover figcaption p:nth-of-type(2){transition-delay: 0.15s;}

.test1:hover figcaption p:nth-of-type(3){transition-delay: 0.25s;}

.test1:hover  img{ transform: translate(-100px, 0px); opacity:0.5;}

<figure class="test1">

<img src="../Images/video/sp.jpg" alt="" />

<figcaption>

<h2>图片标题</h2>

<p>图片注解</p>

<p>图片注解</p>

<p>图片注解</p>

</figcaption>

</figure>