所以我試圖在網頁上創建一個動畫，並試圖找出一種方法來使用CSS3，但我很困惑，我怎麼能做到這一點。CSS3與JavaScript
我需要發生的事情是，當用戶點擊一個鏈接元素時，我想要一個div展開並填充特定於點擊鏈接元素的內容。例如，當用戶點擊標題爲「關於」的鏈接時，鏈接元素下面的div將展開並顯示一些內容。那麼，當他們點擊另一個鏈接時，說「聯繫」，特定於「關於」的內容將消失，特定於「聯繫人」的內容將顯示爲div的重新大小以適應新內容。
我想我可以用Javascript很容易地做到這一點，但有人可以告訴我，如果它可能更容易做/可能與CSS3？
謝謝大家。
如前所述，JavaScript是您最好的朋友。但是既然你問過CSS3是否可行，我不得不試試。基本上我所做的是我用目標選擇器觸發動畫。所以當你點擊一個鏈接時，一個div會隨着一些內容展開，如果你點擊另一個鏈接，一個新的div和一些新的內容（位於同一個地方）將會擴展，從而產生相同的div擴展的錯覺。
這不是一個最佳的解決方案，我讓這個例子非常快，所以它不能像你想的那樣工作，但它至少給你一張關於如何用CSS來完成的圖片。
希望有幫助！
這裏有一個demo，這裏是從我的例子代碼：
HTML
<a href="#box">Box</a><br /><a href="#boxtwo">Box two</a>
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>
CSS
#box, #boxtwo{
position: absolute;
top: 50px;
left: 50px;
width: 0px;
height: 0px;
background-color: #e3e3e3;
color: transparent;
}
#box:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#boxtwo:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
@-webkit-keyframes expand {
0% {width: 0px; height: 0px; color: transaprent;}
50% {width: 100px; height: 100px; color: transparent;}
100% {width: 100px; height: 100px; color: #000000;}
}
謝謝！這基本上是我要找的。可能需要調整一下，但它絕對是一個很好的開始！ –
點擊觸發動畫的最簡單方法是在點擊時向對象添加CSS類，併爲具有該類的任何對象配置CSS3過渡或動畫。
您的第二個類隱藏該項目，然後可以從同一個對象中刪除該類名稱。
動畫/轉換的所有細節都將在CSS3樣式規則中指定。只有使用javascript才能添加/刪除類名。
所有CSS3本身都可以觸發僞選擇器的動畫/轉換，但不具備比這更強大的功能，並且無法觸發基於點擊的動畫。
你需要的是一些juery香料無論你正在開發......如果我沒看錯你想一些事情是這樣的：CSS3 vs Jquery
獲取jQuery庫，並在頁面中引用它。 這裏是一個片段，以啓動你。
<a id="home" href="home.html">Home</a>
<a id="about" href="about.html">About</a>
<div id="home_div"></div>
<div id="about_div"></div>
<script type="text/javascript">
$('#home').click(function() {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().show('slow');
$('#about_div').animate().fadeOut('slow');
return false;
});
$('#about').click(function() {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().fadeOut('slow');
$('#about_div').animate().show('slow');
return false;
});
</script>
您可以將效果更改爲其他可用的效果。
可能更容易使用JavaScript，其實。 – irrelephant