Animating words (appear and disappear) to milliseconds in HTML5 / jQuery / css3

Question

I'm a newbie with jQuery and @keyframes with css3, so I turn to you for advices. I need to create a 30 seconds animation of words and non-words that appear and disappear very quickly at precisely set delays in milliseconds. See demo in flash here: http://www.elaborer.uqam.ca/test.html

Is it possible to do the same thing in HTML5 using jQuery or css3 (or any other way)?

In jQuery, the functions FadeIn and FadeOut seem like a potential solution, but I have no idea how I could iterate hundreds words through these:

<div id="test">Attention!</div>

$(function() {
$('#test').fadeOut(100, function() {
    $(this).text('Bunny').fadeIn(100);
});
 $('#test').fadeOut(100, function() {
    $(this).text('Turtle').fadeIn(100);
});

Another idea I had was to use Bunny Turtle tags on top of each other and animate their opacity using @keyframes, but it seems very inconvenient to use for more than a hundred words.

Another requirement is that the solution works on Ipad Safari.

Any thoughts?

EDIT

I approximated the most what I had using this. Probably not the most elegant solution though. If anyone has ideas to make it better, I'd be very interested.

<span id="foo"></span>

var arr = ["turtle", "bunny", "rabbit", "chicken", "moose", "penguin", "ant", "buffalo", "mouse", "deer", "phoque"];
var narr = ['dsfadsf', 'fasdfsaf', 'dsfasd', 'dsfsaafds', 'fdafaf', 'wwwww', 'yetszfs'];
var key = ['stack', 'over', 'flow', 'jquery', 'html5', 'javascript'];

$("#foo").fadeIn(1).delay(200).html(narr[0]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(50).html(key[0]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[1]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(400).html(arr[0]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(50).html(narr[2]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[1]).fadeOut(1, function(){

$("#foo").fadeIn(1).delay(50).html(key[1]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[2]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(400).html(arr[1]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(50).html(narr[3]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[2]).fadeOut(1, function(){

$("#foo").fadeIn(1).delay(50).html(key[2]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[3]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(400).html(arr[2]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(50).html(narr[4]).fadeOut(1,function(){
$("#foo").fadeIn(1).delay(200).html(narr[3]).fadeOut(1, function(){

//etc.

});}); }); }); }); });      
}); }); }); }); });
}); }); }); }); });

Answer 1

I did something similar quite recently where i created a slideshow of sorts for a series of sentences. jquery is a easy simple way of doing that. you can use the setInterval function to iterate over a series of words stored in an array for example. You can chain fadeIn and fadeOut to get a nice transition effect if you want.

i=0
setInterval(function() {
    if (i == messages.length)
     { some action }
    else
    {
        $('#message').fadeIn(*time*).delay(*time*).html(words[i]).fadeOut(*time*);
        i++;  //counter, set to 0 initially
    }
}, x * 1000); //repeats actions after every x seconds.

One thing to note is that if the sum of all the time in the else block, should be equal to or less than the time x for setinterval for smooth and correct transition effects.

I hope this helps point you in the right direction.