Смена блоков с красивым эффектом CSS

<div id="container">
<h1>CSS tabs</h1>
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">вкладка 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">вкладка 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">вкладка 3</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">вкладка 4</label>
   
<section id="content1">
<p>Сайт ZORNET.Ru - Сегодня многие мечтают иметь собственный сайт, для разного рода деятельности, но, к сожалению не все знают о том, что можно создать сайт совершенно бесплатно. </p>
</section>  
<section id="content2">
<p>Здесь описание или видео ИТД</p>
</section>  
<section id="content3">
<p>Здесь описание или видео ИТД<</p>
</section>  
<section id="content4">
<p>Здесь описание или видео ИТД<</p>
</section>  
</div>
</div>

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 14px/1 'Open Sans', sans-serif;
  color: #555;
  background: #fafafa;
}
   
#container {
max-width: 980px;
margin: 0 auto;
padding: 25px 10px 0;
}
h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}
p {
  margin: 0 0 5px;
  line-height: 1.5;
}
.tabs {
  min-width: 320px;
  max-width: 800px;
  padding: 0px;
  margin: 0 auto;
   
}

section {
  display: none;  
  padding: 15px;
  background: #fff;
  border: 1px solid #ddd;
}
input {
  display: none;
}

label {
  display: inline-block;
  width: calc(25% - 3px);
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #aaa;
  border: 1px solid #ddd;
  background: #f1f1f1;
  border-radius: 3px 3px 0 0;
}
label:last-of-type {
  margin-right: -4px;
}
label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
  color: #555;
  border: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  background: #fff;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4  
{
  display:block;
   
}
section {
  animation: scale 0.7s ease-in-out;
}
@keyframes scale {
  0% {
  transform: scale(0.9);
  opacity: 0;
  }
  50% {
  transform: scale(1.01);
  opacity: 0.5;
  }
  100% {
  transform: scale(1);
  opacity: 1;
  }
}
@media (max-width: 768px) {
  label {display: block;width: 100%;margin-bottom: 4px;border-radius: 3px}
  input:checked + label {border-bottom: 1px solid #ddd;}
  label:last-of-type {margin-bottom: 0;border-bottom: none; border-radius: 3px 3px 0 0
}
}