Tabs animados solo con CSS

Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.

Código HTML

<div class=”tabs”>
<div class=”tab”>
<input type=”radio” id=”tab-1″ name=”tab-group-1″ checked>
<label for=”tab-1″>Tab 1</label>
<div class=”content”>
<p>Aquí va algún contenido para el tab 1</p>
</div>
</div>
<div class=”tab”>
<input type=”radio” id=”tab-2″ name=”tab-group-1″>
<label for=”tab-2″>Tab 2</label>
<div class=”content”>
<p>Aquí va algún contenido para el tab 2</p>
<img src=”http://lorempixum.com/200/100/technics/”>
</div>
</div>
<div class=”tab”>
<input type=”radio” id=”tab-3″ name=”tab-group-1″>
<label for=”tab-3″>Tab 3</label>
<div class=”content”>
<p>Aquí va algún contenido para el tab 3</p>
<img src=”http://lorempixum.com/200/100/nightlife/”>
</div>
</div>
</div>

Código CSS

.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}