tobaco/dabblet.css

## dabblet.css
/**
 * Animation-Test
 */
body{
	background: #f06;
	background: linear-gradient(90deg, #f06, yellow);
	min-height: 100%;
	font-family: Verdana, Arial;
	font-size: 12px
}
div.container {
	width: 30%;
	overflow: hidden;
	background: rgba(0,0,0,.5);
}
div.container div {
	margin: 5px 10px;
	overflow: hidden;
	min-height: 1.2em;
	position: relative;
}
@-webkit-keyframes scroll {
    0%,20% {
        left: 0%
    }
    50%{
    	left: -60%;
    }
    80%,100% {
        right: 0%;
    }
}
label{
	white-space: nowrap;
	display: block;
	color: #fff;
	position: absolute;
	animation-name: scroll;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction:alternate;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="container">
	<div>
		<label>This is a very long title for an unknown object, which could be an audio-file or something else.</label>
	</div>
</div>

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Animation-Test
	*/
	body{
	background: #f06;
	background: linear-gradient(90deg, #f06, yellow);
	min-height: 100%;
	font-family: Verdana, Arial;
	font-size: 12px
	}
	div.container {
	width: 30%;
	overflow: hidden;
	background: rgba(0,0,0,.5);
	}
	div.container div {
	margin: 5px 10px;
	overflow: hidden;
	min-height: 1.2em;
	position: relative;
	}
	@-webkit-keyframes scroll {
	0%,20% {
	left: 0%
	}
	50%{
	left: -60%;
	}
	80%,100% {
	right: 0%;
	}
	}
	label{
	white-space: nowrap;
	display: block;
	color: #fff;
	position: absolute;
	animation-name: scroll;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction:alternate;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class="container">
	<div>
	<label>This is a very long title for an unknown object, which could be an audio-file or something else.</label>
	</div>
	</div>