Animatie Wordpress titles right to left once they overflow - wordpress

Question

I'm trying to have my Worpress titles in one line without breaking to the next line. I used this:
.entry-header{
overflow: hidden;
}
.entry-title{
position: relative;
white-space: nowrap;
}
Then I had no idea how to make it animate so I googled and came up with this :
.entry-header{
overflow: hidden;
}
.entry-title{
position: relative; /*I had to make it relative to wrap it inside the div*/
white-space: nowrap;
animation: floatText 5s infinite alternate ease-in-out;
}
#-webkit-keyframes floatText{
from {
right: 00%;
}
to {
/* right: auto; */
right: 100%;
}
}
It works fine but the the problem is, it doesn't care about the overflow and keeps moving right to left even for titles that don't overflow.

Answer 1

Someone wrote a Javascript code for me and that's exactly what I need. however it has some issues. for example some buttons won't function or some mobile browsers can't detect it.
Css :
.entry-header {
overflow: hidden;
white-space: nowrap;
}
.entry-title {
display: inline-block;
vertical-align: top;
}
Java:
<script type="text/javascript">
jQuery(document).ready(function(){
setTimeout(function(){
textShowAll(jQuery('.entry-title'));
}, 1000);
fixIframe();
});
jQuery(window).resize(function(){
textShowAll(jQuery('.entry-title'), '#ffffff');
fixIframe();
});
function textShowAll(elem, color) {
elem.each(function(){
var width = jQuery(this).width();
var parentWidth = (jQuery(this).parent().width())-0;
if (width>parentWidth) {
jQuery(this).css({
'margin-right' : '0'
});
jQuery(this).stop().animate({
marginRight : '-'+(width-parentWidth)+'px'
}, 3000, function(){
var thisElem = jQuery(this);
setTimeout(function(){
thisElem.css({
'margin-right' : '0'
});
},1000);
setTimeout(function(){
textShowAll(thisElem);
},4000);
});
}
});
}
</script>