li’s up and down one after one

Question

So I have this ul

HTML

  <div class="atividades">
      <ul>
          <li">Agência Funerária</li>
          <li>Funerais</li>
          <li>Cremações</li>
          <li>Trasladações</li>
          <li>Tanatopraxias</li>
          <li>Exumações</li>
          <li>Artigos Religiosos</li>
          <li>Atendimento 24h</li>
      </ul>
  </div>          

CSS

     div.atividades {
        position: absolute; 
        z-index:120;
        top: calc(50% - 40px);
        left:calc(50% - 250px);
        width: 500px; 
        padding: 0; 
    }
    div.atividades ul{
        width:100%;
    }
    div.atividades ul li{
        display:none;
        position:absolute;
        width:100%;
        vertical-align:middle;
        text-align:center;
        font-size:50px;
    }

.ativa {
    /*efeito*/
}

And the next jQuery which allows me to make each li appears in sequence. That is, add the first and appear the second. So on!

  <script>
    $(document).ready(function(e) {
      var li = $("div.atividades li.ativa");
      var first = $(".div.atividades ul li:first");

      first.show();

      function addcls() {  

        li.hide().removeClass("ativa");
        li = li.next();
        if (!li.length){ //se passou o ultimo
          li = first; //volta ao primeiro
        }
        li.show().addClass("ativa");
      };

       setInterval(addcls, 3000);  
    });
  </script>

My goal now is to make one CSS or JQuery that, when appearing to read, it gains the following effect:

Appears with fade-up (down up. and coming up, take a break for about 3 seconds and then take a fade-down (up-down).

Similar to what occurs in http://www.funerariatriunfo.pt/

If the function is m CSS, is already created the class .ativa that is still empty

How to do this?

Answer 1

CSS adapts to your need

$(document).ready(function(){
    function homeTitleAnimation(){
        var interval;
        var counter = 1;
        var myFunc = function() {
            var cur = $('.main-title ul li').length;
            if(cur == counter) {
                $('.main-title ul li.title-active').removeClass('title-active');
                $('.main-title ul li').first().addClass('title-active');
                counter = 1;
            } else {
                counter++;
                $('.main-title ul li.title-active').removeClass('title-active').next().addClass('title-active');

            }
        };
        interval = setInterval(myFunc, 3000);
    }

    homeTitleAnimation();
});

.main-title ul {
    list-style     : none;
    padding        : 0;
    margin         : 10px 0 0;
    position       : relative;
    height         : 100px;
    font-size      : 36px;
    font-weight    : 300;
    text-align     : center;
    font-family    : Arial, sans-serif;
    letter-spacing : 5px;
    text-transform : uppercase;
    z-index        : 100;
}

.main-title ul li {
    width                              : 100%;
    text-align                         : center;
    position                           : absolute;
    opacity                            : 0;
    top                                : 85px;
    line-height                        : 100px;

    -webkit-transition                 : all 0.5s ease-in-out;
    -moz-transition                    : all 0.5s ease-in-out;
    -o-transition                      : all 0.5s ease-in-out;
    transition                         : all 0.5s ease-in-out;
    transition-timing-function         : ease;
    -webkit-transition-timing-function : ease; /* Safari and Chrome */
}

.main-title li.title-active {
    opacity                            : 1;
    top                                : 0;
    -webkit-transition                 : all 1s ease-in-out;
    -moz-transition                    : all 1s ease-in-out;
    -o-transition                      : all 1s ease-in-out;
    transition                         : all 1s ease-in-out;
    transition-timing-function         : ease;
    -webkit-transition-timing-function : ease; /* Safari and Chrome */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>

        <div class="main-title">
            <ul>
                <li class="title-active">Script feito com</li>
                <li>jquery.min.js</li>
                <li>javaScript</li>
                <li>CSS</li>
                <li>HTML</li>
            </ul>
        </div>

Answer 2

follows a possibility, basically a combination of setTimeout, setInterval and transition: top

var lis = document.querySelectorAll("ul li");
var trans = 750;            // mesmo tempo aplicado no CSS.
var dur = 3000;             // duração da animação. deve ser maior que duas (2 * trans).
var tot = lis.length * dur; // tempo total que levará para realizar a animação de todos os itens.

// adicionar a classe "active" para ativar a animação
var animate = function (li) {
  li.classList.add("active");
  // remover a classe "active" antes de animar o proximo item.
  window.setTimeout(function () {
    li.classList.remove("active");
  }, dur - trans)
}

// adicionar um delay para que uma animação não sobrescreva a outra.
var onDelay = function (li) {
  animate(li)
  window.setInterval(function () {
    animate(li)
  }, tot) 
};

// inicializando as animações.
[].forEach.call(lis, function (li, indice) {
  window.setTimeout(function () {    
    onDelay(li)
  }, dur * indice)
})

ul {
  padding: 0px;
  position: relative;
  width: 360px;
  height: 100px;
  overflow: hidden;
  list-style-type: none;
  box-shadow: 0px -10px 10px -10px black inset;
  border-bottom: 1px solid black;
}

ul li {
  box-sizing: border-box;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: calc(100% + 10px);
  left: 10px;
  box-shadow: 0px 0px 5px black;
  background-color: whitesmoke;
  border-radius: 5px;
  line-height: 80px;
  transition: top 750ms linear;
  text-align: center
}

li.active {
  top: 10px;
}

<div class="atividades">
    <ul>
        <li>Agência Funerária</li>
        <li>Funerais</li>
        <li>Cremações</li>
        <li>Trasladações</li>
        <li>Tanatopraxias</li>
        <li>Exumações</li>
        <li>Artigos Religiosos</li>
        <li>Atendimento 24h</li>
    </ul>
</div>