頁面轉換（幻燈片）不能與CSS3一起工作

我正在創建一個單頁面網站，當點擊一個鏈接時，我的內容在整個頁面上滑動（從左到右，緩衝超過1秒）。不幸的是，我在獲得轉換工作方面絕對沒有運氣。頁面轉換（幻燈片）不能與CSS3一起工作

我可以讓.content類使用：hover進行轉換，但似乎無法實現任何轉換/動畫效果。理想情況下，我希望#home，#portfolio，#contact和#cv成爲滑入的元素，但現在幾個小時都沒有運氣。

我想知道是不是因爲有一個包含我所有幻燈片的套筒？

這是我的相關部分的CSS代碼：

#sleeve { 
     position: relative; 
     top: 35%; 
     width: 400%; 
     z-index: 2; 
     height: 60%; 
    } 

#home, #portfolio, #contact, #cv { 
     background: aqua; 
     width: 25%; 
     margin: 0; 
     position: relative; 
     z-index: 2; 
     float: left; 
     height: 100%; 

-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out; 
    } 

#home:target ~ #header #navigation #home, 
#portfolio:target ~ #header #navigation #portfolio, 
#contact:target ~ #header #navigation #contact , 
#cv:target ~ #header #navigation #cv { 
    background: white; 
margin-left: 0%; 
} 


.content { 
width: 70%; 
min-height: 40%; 
margin-left: 15%; 
margin-right: 15%; 
margin-top: 2%; 
background-color: white; 
z-index: 5; 
position: relative; 
}

，這是我的HTML：

<body> 
<div id="header"> 
<div id="navigation"> 
    <a id="link-home" href="#home"> home </a> 
    <a id="link-portfolio" href="#portfolio"> portfolio </a> 
    <a id="link-contact" href="#contact"> contact </a> 
    <a id="link-cv" href="#cv"> cv </a> 
</div> 
<h1> ---- :</h1> <h2>portfolio and work</h2> 
</div> 

<div id="sleeve"> 

<div id="home"> 
    <div class="content"><p> home</p> </div> 
</div> 

<div id="portfolio" class="panel"> <p> portfolio </p> </div> 
<div id="contact" class="panel"> <p> contact </p> </div> 
<div id="cv" class="panel"> <p> cv </p> </div> 
</div> 

<div id="footer"> copyright ----- 2013 </div> 
</body>

我將是任何人的幫助，感激不盡！

來源

2013-08-05 user2653919