Change an element every few seconds and sync with animation

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!

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);