.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>圖片標(biāo)題</h2>
??????????<p>線性動(dòng)畫?&nbsp;&nbsp;線性動(dòng)畫???</p>
???????
?????????<div>?</div>
????????</figcaption>
	
	</figure>

經(jīng)測(cè)試沒(méi)問(wèn)題 先定義div 偏移出界面0度旋轉(zhuǎn)

鼠標(biāo)經(jīng)過(guò)后div移動(dòng)進(jìn)入視野并加以角度旋轉(zhuǎn)?

定義標(biāo)簽不要忘記z-index值可以隨意給大就好 ?否則p標(biāo)簽的字就不會(huì)再div之上。

可一貼一下代碼嗎？不過(guò)如果你是在chrome瀏覽器的話，同時(shí)有幾個(gè)動(dòng)畫效果時(shí)，第一個(gè)會(huì)不靈活?？梢杂没鸷囋嚒?/p>