Replicate CSS Animation on ::after using jquery

Question

So I've done a lot of searching, and can't seem to find another question that helps. However I feel like this might be a common problem so could be a duplicate, anyway.

I have a really nice CSS Underline animation going on when I hover a piece of text, you can see the example here:

 let options = ['Over Here', 'This Way', 'At Me'] $(document).ready(function () { let jobInterval = setInterval(() => changeText(), 3000) }) function changeText () { let newText = options[Math.floor(Math.random() * options.length)] $('#change').text(newText) } 

 #change { display: inline-block; position: relative; padding-bottom: 3px; } #change:after { content: ''; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition: width 3s ease, background-color 3s ease; } #change:hover:after { width: 100%; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h1> <span>Look </span> <span id="change">Over Here</span> </h1> </div> 

https://jsfiddle.net/6b2cqrj7/7/

However, I don't want it to be done when I hover. The idea is that I have a piece of text that changes every X seconds, and I want the underline to animate for X seconds then the word switches and the animation plays again. Like a little timer bar.

I have tried all sorts, but because I can't manipulate the ::after tag using JS/JQuery I can't work out how to get this working. Because the animation is happening on the ::after tag, I can't just add a new class I need to change the value of the CSS so the transition will apply. I think.

This is my first real attempt at using CSS animations so I'm quite stumped here.

Answer 1

Use CSS3 keyframes to get the desired result.

 let options = ['Over Here', 'This Way', 'At Me'] $(document).ready(function () { let jobInterval = setInterval(() => changeText(), 3000) }) function changeText () { let newText = options[Math.floor(Math.random() * options.length)] $('#change').text(newText) } 

 #change { display: inline-block; position: relative; padding-bottom: 3px; } #change:after { content: ''; display: block; margin: auto; height: 3px; width: 0px; background: transparent; animation: myLine 3s ease infinite; transition: width 3s ease, background-color 3s ease; } #change:hover:after { width: 100%; background: red; } @keyframes myLine{ from {width: 0; background: transparent;} to {width: 100%; background: red;} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h1> <span>Look </span> <span id="change">Over Here</span> </h1> </div> 

Hope this helps