CSS左右顯示隱藏動畫是網頁設計中的一種重要特效。它可以讓網頁元素在左右移動的同時，顯示或隱藏不同的內容，給用戶帶來視覺與交互的享受。

<style type="text/css">
.container {
position: relative;
width: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: all .3s ease-in-out;
}
.content.right {
left: 50%;
}
.toggle {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 30px;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.hidden {
display: none;
}
</style>

以上是CSS的樣式代碼。它主要由三部分組成：.container是放置兩個內容塊的容器；.content是實際的內容塊，其中left:0表示初始狀態在左側，.right是移動到右側的樣式；.toggle是切換按鈕。

<div class="container">
<div class="content">
<p>左側內容</p>
</div>
<div class="content right hidden">
<p>右側內容</p>
</div>
<div class="toggle">></div>
</div>

以上是HTML代碼。根據剛剛的樣式代碼，我們需要在.content中放入兩個內容塊，給其中一個加right類名表示位于右側，另一個加hidden類名表示初始狀態隱藏。再加入一個.toggle按鈕。

最后，我們需要為.toggle添加點擊事件來切換兩個內容塊之間的顯示隱藏關系。

<script type="text/javascript">
let toggleBtn = document.querySelector('.toggle');
let contentLeft = document.querySelector('.content:not(.right)');
let contentRight = document.querySelector('.content.right');
toggleBtn.addEventListener('click', function() {
contentLeft.classList.toggle('right');
contentRight.classList.toggle('hidden');
});
</script>

以上是JavaScript代碼。我們獲取到.toggle按鈕以及兩個.content元素，并添加點擊事件。這里使用toggle()方法來同時切換兩個類名，實現內容塊的左右切換與顯示隱藏。