Is it possible to animate a change to innerHTML using CSS only?

Question

My pure-JS script is changing the text inside a <p> element simply by using innerHTML. Is it possible to animate this change with CSS only, without using jQuery? If so, how?

Thanks!

Answer 1

Before setting innerHTML add some class to the container, which through CSS set the pre-animation state, then set innerHTML and remove that class. if the container has transition set it should animate to clean state.

 .container {
        transition: all 1s;
        max-height: 300px;
    }

    .container.pre-animation {
        opacity:0;
        max-height: 0;
    }

setTimeout to make sure it effect more visible

var innerHTMLString = '<h1> I am H1 </h1>';

var container = document.querySelector('.container')

container.classList.add('pre-animation');
container.innerHTML = innerHTMLString +'ravi';
setTimeout(function(){
    container.classList.remove('pre-animation')
},100)