Untitled

dabblet.css

html, body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Tahoma, sans-serif;
	font-weight: bold;
}

.all {
	font-size: 5vw;
	animation: spinnerRotate 5s linear infinite;
}

.all span.A,
.all span.P {
	display: inline-block;
	animation: antiRotate 5s linear infinite;
}
.all span.M {
	display: inline-block;
	animation: mRotate 5s linear infinite;
}

@keyframes spinnerRotate {
	0% { transform:rotate(0deg); }
	25% { transform:rotate(0deg); }
	50% { transform:rotate(180deg); }
	75% { transform:rotate(180deg); }
	100% { transform:rotate(360deg); }
}

@keyframes antiRotate {
	0% { transform:rotate(0deg); }
	25% { transform:rotate(0deg); }
	50% { transform:rotate(-180deg); }
	75% { transform:rotate(-180deg); }
	100% { transform:rotate(-360deg); }
}

@keyframes mRotate {
	0% { transform:translateY(0px); }
	25% { transform:translateY(0px); }
	50% { transform:translateY(-2px); }
	75% { transform:translateY(-2px); }
	100% { transform:translateY(0px); }
}

dabblet.html

<div class="all">
	<span class="A">A</span>
	<span class="M">M</span>
	<span class="P">P</span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}