Delayed appearance of paragraph content

Only CSS

by Ovi Stof

HTML

<h1 class="tit1">Title 1</h1>
<div class="div1">
  Donec lectus eros, pellentesque et molestie id, congue nec metus. Aenean vel consequat nunc. Donec turpis lectus, mattis nec hendrerit sit amet, euismod a purus. Proin tortor eros, porttitor non faucibus ut, porttitor tempus odio. Quisque eu porttitor quam. Curabitur ornare tempus libero in dignissim. Maecenas condimentum imperdiet maximus.
</div>
<h1 class="tit2">Title 2</h1>
<div class="div2">
  In hendrerit sodales ante, sed suscipit neque tincidunt in. Phasellus sit amet ante metus. Praesent scelerisque est hendrerit dapibus sagittis. Nam et mollis erat, non convallis nisl. Etiam interdum diam leo, a rutrum ligula luctus at. Nulla sagittis dictum urna quis venenatis. In nisl mi, porttitor eget elementum a, suscipit et massa. Ut ut condimentum diam. Vestibulum non scelerisque augue. Vestibulum ac posuere mi, at lobortis massa. Ut fermentum sollicitudin dui, vel laoreet augue lacinia vel. Praesent maximus nunc nec diam lacinia, non aliquet dolor molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<h1 class="tit3">Title 3</h1>
<div class="div3">
  Nulla ac eros nec sem gravida suscipit eget interdum mauris. Nullam fermentum egestas diam, et imperdiet dui tempus fermentum. In facilisis ut orci at volutpat. Ut dictum, lorem a aliquet imperdiet, nisi elit sagittis ex, ut consequat urna ligula id quam. Maecenas magna sapien, ultrices quis imperdiet ac, fermentum ac massa. Integer urna ipsum, bibendum quis urna at, placerat luctus est. Etiam vitae efficitur turpis. Sed blandit pretium enim non dictum. Ut id mi vel tortor tempor congue eu tempus mi. Praesent fringilla ullamcorper finibus. Fusce sit amet ipsum in mi suscipit cursus et vel orci. Nulla ultricies mi in enim tincidunt vehicula. Etiam orci libero, vehicula nec eros et, vulputate mollis nulla. Vivamus vel sapien ut sem tempor ullamcorper. Donec facilisis nulla et velit scelerisque finibus. 
</div>

CSS

.tit1, .tit2, .tit3 {text-align:center;}
.tit1, .tit2, .tit3, .div1, .div2, .div3 {   
  opacity: 0;
  animation-name: decalare;
  animation-fill-mode: forwards;
}
.div1, .div2, .div3 {
  width: 100%;
  position: relative;
  margin: 10px auto;
}
.tit1, .div1 {animation-duration: 3s;}
.tit2, .div2 {animation-duration: 7s;}
.tit3, .div3 {animation-duration: 12s;}
.div1 {background: red;color:white;}
.div2 {background: yellow;}
.div3 {background: blue;color:white;}
@keyframes decalare {
  from {opacity: 0;} to {opacity: 1;}}
}