реализовать анимированную

dabblet.css

/*
	реализовать анимированную 
	навигацию по div.a1
	без перезагрузки страницы
	с поддержкой истории послещений
	
	http://clck.ru/d/nEyP0z8x143w5
*/

.container
{
	font: 16px/25px Arial;
	width: 370px;
	height: 500px;
	margin: 15px;
	box-shadow: 0 0 3px rgba(0,0,0,0.6);
	padding: 10px;
}

/* aside меню */
.menu
{
	list-style: none;
	padding: 0;
	margin: 0 10px 0 0;
	display: inline-block;
	vertical-align: top;
	width: 36px;
}

.menu li
{
	line-height: 27px;
	white-space: nowrap;
	background-color: #cfcfcf;
	margin: 0 0 5px 0;
	text-align: center;
}

.body
{
 	display: inline-block;
	vertical-align: top;
	width: 300px;
	height: 470px;
	background-color: #e4e4e4;
	box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
	overflow: hidden; 
	position: relative;	
}

/* Настраиваем карусель */
.body .a1, .body .a2, .body .a3
{
	position: absolute;
	left: 0;
	padding: 10px;
	overflow: auto;
	height: 460px;
	transition: top .5s ease-in;
}

/* Статья а1 */
.a1, 
#a1:target ~ .a1
{
	top: 0;		
}

.a2,
#a1:target ~ .a2
{
	top: 480px;
}

.a3,
#a1:target ~ .a3
{
	top: 960px;
}

/* Статья а2 */
#a2:target ~ .a1
{
	top: -480px;		
}

#a2:target ~ .a2
{
	top: 0;
}

#a2:target ~ .a3
{
	top: 480px;
}

/* Статья а3 */
 
#a3:target ~ .a1
{
	top: -960px;		
}

#a3:target ~ .a2
{
	top: -480px;
}

#a3:target ~ .a3
{
	top: 0;
}

dabblet.html

<div class="container">	

	<ul class="menu">
		<li><a href="#a1">a1</a></li>
		<li><a href="#a2">a2</a></li>
		<li><a href="#a3">a3</a></li>
	</ul>

	<div class="body">	
		<span id="a1"></span>
		<span id="a2"></span>
		<span id="a3"></span>	
		<div class="a1">
			<h1>a1</h1>
			<p>
				Дип-скай объект, как бы это ни казалось парадоксальным, существенно меняет Тукан, 
				Плутон не входит в эту классификацию. Аргумент перигелия, и это следует подчеркнуть, 
				последовательно оценивает непреложный афелий , данное соглашение было заключено на 2-й 
				международной конференции "Земля из космоса - наиболее эффективные решения". 
			</p>
			<p>	
				Очевидно, что астероид недоступно ищет космический реликтовый ледник, хотя галактику в созвездии 
				Дракона можно назвать карликовой. Космогоническая гипотеза Шмидта позволяет достаточно 
				просто объяснить эту нестыковку, однако полнолуние иллюстрирует астероидный ионный хвост, 
				Плутон не входит в эту классификацию. 
			</p>
			<p>		
				Лисичка оценивает экваториальный поперечник, хотя 
				это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. 
				Азимут, и это следует подчеркнуть, колеблет Южный Треугольник, при этом плотность Вселенной 
				в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.
			</p>
			</div>
			<div class="a2">
			<h1>a2</h1>
			<p>
				Дип-скай объект, как бы это ни казалось парадоксальным, существенно меняет Тукан, 
				Плутон не входит в эту классификацию. Аргумент перигелия, и это следует подчеркнуть, 
				последовательно оценивает непреложный афелий , данное соглашение было заключено на 2-й 
				международной конференции "Земля из космоса - наиболее эффективные решения". 
			</p>
			<p>	
				Очевидно, что астероид недоступно ищет космический реликтовый ледник, хотя галактику в созвездии 
				Дракона можно назвать карликовой. Космогоническая гипотеза Шмидта позволяет достаточно 
				просто объяснить эту нестыковку, однако полнолуние иллюстрирует астероидный ионный хвост, 
				Плутон не входит в эту классификацию. 
			</p>
			<p>		
				Лисичка оценивает экваториальный поперечник, хотя 
				это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. 
				Азимут, и это следует подчеркнуть, колеблет Южный Треугольник, при этом плотность Вселенной 
				в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.
			</p>
			</div>
			<div class="a3">
			<h1>a3</h1>
			<p>
				Дип-скай объект, как бы это ни казалось парадоксальным, существенно меняет Тукан, 
				Плутон не входит в эту классификацию. Аргумент перигелия, и это следует подчеркнуть, 
				последовательно оценивает непреложный афелий , данное соглашение было заключено на 2-й 
				международной конференции "Земля из космоса - наиболее эффективные решения". 
			</p>
			<p>	
				Очевидно, что астероид недоступно ищет космический реликтовый ледник, хотя галактику в созвездии 
				Дракона можно назвать карликовой. Космогоническая гипотеза Шмидта позволяет достаточно 
				просто объяснить эту нестыковку, однако полнолуние иллюстрирует астероидный ионный хвост, 
				Плутон не входит в эту классификацию. 
			</p>
			<p>		
				Лисичка оценивает экваториальный поперечник, хотя 
				это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. 
				Азимут, и это следует подчеркнуть, колеблет Южный Треугольник, при этом плотность Вселенной 
				в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.
			</p>
			</div>
		
	</div>
</div>	

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}