Animate LI into div - css

Question

I jave just created a Twitter widget for my website and I want to fade in and out the last 5 or more tweets at set intervals using css3 I have set my div to be 60% width with a height of 90px same as my UL and LI as shown below...
div#twitterwidget {
width: 60%;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
height: 90px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
color: #EC9A20;
font-weight: bold;
text-shadow:0 1px 0 rgba(0,0,0,0.5)
}
div#twitterwidget ul {
list-style:none;
height:90px;
overflow:hidden
}
div#twitterwidget ul li {
height:90px
}
All I want to achieve is is load up the the next tweet from the bottom using css3 animations!
Many thanks for your help
Phillip Dews
As Requested here is my HTML
<div id="twitterwidget"><script src="js/twitterWidget.js"></script>
<script>
twitterFetcher.fetch('347858782015086592', '', 5, true, false, true, '', false, handleTweets);
function handleTweets(tweets){
var x = tweets.length;
var n = 0;
var element = document.getElementById('twitterwidget');
var html = '<ul>';
while(n < x) {
html += '<li>' + tweets[n] + '</li>';
n++;
}
html += '</ul>';
element.innerHTML = html;
}
</script>
</div>

Answer 1

In that case, I think it would be far easier to use javascript (here with jQuery) to animate your widget. I am not sure of you exaclty want, but this is the idea :
function animateWidget() {
li = $('div#twitterwidget>ul>li:first');
li.slideUp(1000, function(){
li.clone().appendTo('div#twitterwidget>ul').show();
li.remove();
});
}
$(document).ready(function(){
setInterval(animateWidget,1000);
});
What is done here is :
run the animation every 1s
animate the first tweet with slideUp
when the animation is done, put the tweet in the end of the list
See the updated Fiddle