My HTML and CSS structure looks like this:
<div class="box">Box Content</div>
The CSS code is as follows:
<style>
@-webkit-keyframes widthresize {
0% {
width:10px
}
50% {
width:50px
}
100% {
width:100px
}
}
@-moz-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
@-ms-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
@keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
body {
background-color: #333;
}
.box {
color: #FFF;
}
.box::after {
background: #FFF;
content: '';
position: relative;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
}
.widthanimation::after {
-webkit-animation-name: widthresize;
-moz-animation-name: widthresize;
-o-animation-name: widthresize;
-ms-animation-name: widthresize;
animation-name: widthresize;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
}
</style>
Finally, the jQuery snippet responsible for adding the 'widthanimation' class to the div:
jQuery(document).ready(function($) {
$('div.box').addClass('widthanimation');
});
I am facing an issue where the animation specified in the CSS keyframes is not working when the 'widthanimation' class is added via jQuery. I am unable to modify my HTML markup. Any help or suggestions on how to achieve the desired animation with this setup would be highly appreciated. You can view the fiddle link here. Thank you.