I am currently working on a project with a button that dynamically changes the content of a class named .content. The content is animated using the following CSS properties:
.content{
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
}
When the button is clicked, the HTML content is updated like this:
$('.button-about').click(function(){
$('.content').html('<h1>Test</h1>');
});
While this functionality works as expected, the issue arises when the animation does not restart after the content change. Is there a solution to maintain the animation even after updating the HTML content?
Thank you!
EDIT: Here is a jsFiddle link for reference: http://jsfiddle.net/ar7wU/