Non-ducky Circular Thing

dabblet.css

/**
 * Non-ducky Circular Thing
 */

.arrow:before {
	content: '→';
	-webkit-animation: around 5s infinite ease-in-out;
	position: absolute;
	left: 0;
	font-family: monospace;
	font-size: 50px;
}

@-webkit-keyframes around {
	0% { -webkit-transform: rotateY(-90deg); }
	25% { -webkit-transform: rotateY(0) scale(0.5); }
	50% { left: calc(100% - 1ch); }
	75% { -webkit-transform: rotateY(180deg) scale(1.5); }
	100% { -webkit-transform: rotateY(270deg); }
}

dabblet.html

<div class="arrow"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}