How to use a CSS animation within a JavaScript plugin?

Question

I want to highlight some text on using a CSS animation and a time delay.

This would normally be fairly straight forward. I know the following code works as I have tested and ran it.

 .tester { background-color: rgba(199, 220, 101, 0); animation: example 1s linear 6s 1; animation-fill-mode: forwards; } @keyframes example { 0% { background-color: rgba(199, 220, 101, 0); } 100% { background: rgba(199, 220, 101, 1); } } 

 <p> In writing <span class="tester">this book</span> I have drawn consciously and unconsciously from one million outside sources. </p> 

But I'm running a JavaScript plugin called typed.js. This means the text types out. But the effect I want is the text to type out (this is fine) and then after a time delay some of the text to be highlighted. But my CSS animations are not working within typed.js.

If you go to http://www.thebooktheworldwrote.com/

i explain the problem. The effect i would like is the highlight of 'good people' after 4 seconds. Just adding -webkit- stuff so 'good people' highlights. At the minute it is not.

This is currently impossible with the typing effect. The best i can do is highlight some sections from the word go,

View https://jsfiddle.net/harrydry/p4ev1nj2/3/ for the best look at the problem.

Answer 1

Could you give us some more information?

Try to make the text you want highlighted to make the font bold and also check out this github page, you probably gonna need to do some small editing to type.js, as in configurations related to timeout

https://github.com/mattboldt/typed.js/blob/master/README.md

Answer 2

Try something like this

.tester{
    animation-name: highlight;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    background-color: green;
}

@keyframes highlight{
    from {background-color: green;}
    to {background: lightgreen;}
}
@-webkit-keyframes highlight{
    from {background-color: green;}
    to {background: lightgreen;}
}
@-moz-keyframes highlight{
    from {background-color: green;}
    to {background: lightgreen;}
}

With this you get fade effect for background color change.

Full example here https://jsfiddle.net/2r1hs76u/

If you don't want fade effect use animation-delay like this https://jsfiddle.net/2r1hs76u/2/