```js
$(function() {
  $('.text1').delay(1000).fadeIn(1500);
  $('.text1').delay(600).fadeOut(1500);

  $('.text2').delay(5000).fadeIn(1500);
  $('.text2').delay(600).fadeOut(1500);

  $('.text3').delay(10000).fadeIn(1500);
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text1">Lorem Ipsem</div>
<div class="text2">Lorem Ipsem</div>
<div class="text3">Lorem Ipsem</div>
```

Above is my simple jQuery animation; **simple delay -> fadeIn -> delay -> fadeOut.** However I find when trying to create a loop, for my animations to run continuously my code becomes way to large and bulky. I am wondering if it's at all possible to rewrite what I have above with CSS3 only, and then using the infinite option CSS allows.

I've gotten close with CSS below code however, I need to completely hide or fadeOut each line of text before new text shows.

```css
    @-webkit-keyframes slider {
        0%   { opacity: 0.4; }
        100% { opacity: 1; }
    }
    @-moz-keyframes slider  {
        0%   { opacity: 0.4; }
        100% { opacity: 1; }
    }
    @-ms-keyframes slider  {
        0%   { opacity: 0.4; }
        100% { opacity: 1; }
    }

    .slider {
        -webkit-animation: slider 1s alternate infinite;
        -moz-animation: slider 1s alternate infinite;
        -ms-animation: slider 1s alternate infinite;
    }
```

```html
<div class="slider">Lorem Ipsum</div>
```