CSS Animation shorthand

dabblet.css

/* CSS Animation shorthand 

discuss: twitter.com/#CSS_QUIZ_5269019 /cc @darkgoyle */

/* [easy] Quiz 0 */
code { white-space:pre }

code { animation:example 1s  }

@keyframes example { 
  from { opacity:0 }
  to { opacity:1 } }}
  
/* [hard] Problem */
* { transform-style:preserve-3d }
base { animation:spins 1s infinite }
@keyframes spins { 50% { transform: rotate(72deg) } }

/* [advanced] Quiz 1 */
[href]:before { content:attr(href) }

/* [advanced] Quiz 2 */
base:before { display:block; background:black }
:hover base:before { background:transparent }

dabblet.html

<base href="https://developer.mozilla.org/en-US/docs/CSS/">

<code>
	<a href=animation></a>: 
		<a href="animation-name"></a>
		<input placeholder="animation-duration" pattern="\.?\d{1,n}m?s">
		<a href="animation-timing-function"></a>
		<input placeholder="animation-delay" pattern="\.?\d{1,n}m?s">
		<input placeholder="animation-iteration-count" type=number>
		<a href="animation-direction"></a>
		<a href="animation-fill-mode"></a>
</code>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}