I have recently developed a Twitter widget for my website and I am interested in creating an effect where the last 5 tweets fade in and out at specific intervals using css3. The styling of my div is set to be 60% width with a height of 90px, matching the UL and LI elements 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
}
My goal is to implement a CSS3 animation that loads up the next tweet from the bottom. Thank you for your assistance. Phillip Dews
Here is the HTML code:
<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>