I want to achieve a cool effect where each word starts at 0 opacity and translateY(65px), then fades in one word at a time while transitioning to translateY(0). Although the words are fading in, they are not translating as desired. For reference, check out this example: (scroll down to paragraph)
var $el = $(".example:first"), text = $el.text(),
words = text.split(" ");
var html = "";
for (var i = 0; i < words.length; i++) {
html += "<span>" + words[i] + " </span>";
};
$el.html(html).children().each(function(i){
$(this).addClass('fadeInUp');
});@keyframes fadeInUp{
0%{
transform: translateY(65px);
opacity: 0;
}
100%{
opacity:1;
transform:none;
}
}
.fadeInUp{
transition: opacity .5s ease-in-out,transform .8s ease-in-out,-webkit-transform .8s ease-in-out;
animation:fadeInUp 3s forwards;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
These are some words that should be faded in and transformed one after the other.
</div>