.test8{
	background:#003300;
}
.test8 figcaption{
	width: 100%;
	height: 100%;
}
.test8 figcaption div{
	width: 120%;
	height: 50%;
	background: #FFFFFF;
	opacity: 0.8;
	position: absolute;
	bottom: 0;
	transform:translate(0,200px) rotate(0deg); 
	transform-origin:0 0; 
	opacity:0.5;
	
}




.test8 figcaption h2{
	transform: scale(0,0);
	opacity: 0;
	position: absolute;
	top: 20%;
	left: 10%;
	
}
.test8 figcaption p{
	transform: translate(0,100px);
	position: absolute;
	top: 80%;
	right: 10%;
	z-index: 9999;
	font-weight: bold;
	
}

.test8 img{
	opacity: 1;
}

.test8:hover figcaption div{
	transform:translate(0,130px) rotate(-10deg); 
	opacity:0.9;
	
}
.test8:hover figcaption h2{
	transform: scale(1,1);
	opacity: 1;
	transition-delay: 0.1s;
}

.test8:hover figcaption p{
	transform: translate(0,0);
	transition-delay: 0.2s;
}
.test8:hover img{
	opacity: 0.8;
}

<figure class="test8">
		<img src="img/ti896.jpg">
		<figcaption>
          <h2>图片标题</h2>
          <p>线性动画 &nbsp;&nbsp;线性动画   </p>
       
         <div> </div>
        </figcaption>
	
	</figure>

经测试没问题 先定义div 偏移出界面0度旋转

鼠标经过后div移动进入视野并加以角度旋转 

定义标签不要忘记z-index值可以随意给大就好  否则p标签的字就不会再div之上。

可一贴一下代码吗？不过如果你是在chrome浏览器的话，同时有几个动画效果时，第一个会不灵活。可以用火狐试试。