Von links die Kuh ins Bild

dabblet.css

body {font-size:30px; font-family: "Comic Sans MS", Arial, "Helvetica Neue", sans-serif; }

@keyframes wobble {
	0% {
		left: 0;
	}
	25% {
		left: -20%;
	}
	50% {
		left: 50%;
	}
	100% {
		left: 0;
	}
}

ul {
	margin:0;
	padding:0;
}

li {
	list-style: none;
	transform-origin: 0 50%;
	/*transform: translate(100px, 100px) skew(30deg);*/
	transition: transform .5s ease-in, background-color 1s linear; 
	background-color: #bada55;
	animation: wobble 5s infinite alternate;
	position: absolute;
}

li:hover {
left: 100px;
background-color: #f00;
}

li>ul {
	display: none;
}


li:hover>ul, li:focus>ul {
	display: block;
}

dabblet.html

<ul>
	<li tabindex="0">
		<a href="#">Kuh</a>
		<ul>
			<li>
				<a href="#">Noch etwas.</a>
			</li>
		</ul>
	</li>
</ul>

settings.json

{"view":"split","prefixfree":"1","page":"css"}