Change an element every few seconds and sync with animation

Question

Recently I've been learning some javascript to improve my pages.

I tried to make a simple exercise in which I change an element every 5 seconds but when I tried to add a fadein animation with css and only applies to the first time, at this point I don't really know if my javascript isn't written the right way or it has something to do with my css.

Can someone with more knowledge and experience give me some tips?

Okay, so basically the problem is I can't get the animation repeating like the sentences, you can check it out here:

//Calling the element.
var $slogan = document.getElementById("slogan");

// Setting an array with several strings.
var sloganArray = ["This sentence will change every 5 seconds!", "See? I'm changing!", "Knock Knock.", "Who's there?", "Heck I don't know!"];

//Setting variable to control the index.
var sloganIndex = 0;

/* This function (only when called) replaces the text of the element called before with text contained on the strings of the array, each time incrementing one and going through every array position. */
function changeSlogan() {
    $slogan.innerHTML = sloganArray[sloganIndex];
    ++sloganIndex;
    if (sloganIndex >= sloganArray.length) {
        sloganIndex = 0;
    }
  }

//Calling the function created before every five seconds.
setInterval(changeSlogan,5000);

#slogan {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #000;
    opacity: 1;
    transition: opacity .3s ease-out;
    -webkit-animation:fadeIn ease-out ;
    -moz-animation:fadeIn ease-out ;
    animation:fadeIn ease-out;
    -webkit-animation-fill-mode:forward;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forward;
    animation-fill-mode:forward;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 4.9s; /* Chrome, Safari, Opera */
    animation-delay: 4.9s;
    animation-iteration-count: infinite;
}

<h3 id="slogan"><em>This is a dynamic sentence!</em></h3>

Thank you for you time!

Answer 1

Thought I'd have a go at answering this using requestAnimationFrame, which is a performant method of animating elements using JavaScript. It uses the internal framerate of your machine, meaning it'll use less memory and will ensure it stays in sync with any possible CSS animations you add. I've created a CodePen but also added the code below with comments.

// All your slogans
const sloganArray = [
  "This sentence will change every 5 seconds!",
  "See? I'm changing!",
  "Knock Knock.",
  "Who's there?",
  "Heck I don't know!"
];

// Initial slogan index
let sloganIndex = 0;

// Slogan container
const element = document.getElementById("slogan");

// Set first slogan on render
element.innerHTML = sloganArray[sloganIndex];

// The last interval in which something changed, starting from 0 and will be updated by the function
let lastIntervalTimestamp = 0;

// Start of function
function render(now) {
  
  // If the interval is 0
  // or "right now" minus timestamp is equal or higher than 5 seconds
  // do the following
  if (!lastIntervalTimestamp || now - lastIntervalTimestamp >= 5 * 1000) {
    
    // Update the timestamp to right now
    lastIntervalTimestamp = now;

    // Update the slogan in the container
    element.innerHTML = sloganArray[sloganIndex];
    
    // Progress the slogan index along by 1
    ++sloganIndex;
    
    // If the slogan index is at the last of the slogan array flip to 0
    if (sloganIndex >= sloganArray.length) {
      sloganIndex = 0;
    }
  }
  
  // Rerun the whole function again when finished, this happens constantly while the animation API runs
  requestAnimationFrame(render);
}

// Start the function when the very first animation frame is requested, aka when the browser is ready
window.requestAnimationFrame(render);

Answer 2

I would suggest to use only css and no javascript for your case . I created three effects.Use .slogan, .slogan up, .slogan down and put the changing elements inside <p> elements as below.

Check and the css here : http://jsfiddle.net/csdtesting/ncmctw65/1/

Html to set:

<div class="wrapper">
    <h3>Cool fading text only with css try .slogan, .sloga down, .slogan up </h3>
    <div class="slogan down">
        <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">This sentence will change every 5 seconds!</a></p>
        <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">See? I'm changing!</a></p>
        <p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Who's there?</a></p>
        <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">eck I don't know!</a></p>
    </div>
</div>

Hope you liked that!