<script src="/word/memory.js"></script>
<style>
/* cards */
+html {
+ overflow: hidden; /* rotation overflow on celebration */
+}
+
figure {
display: inline-block;
background: #224;
figure.good {
opacity: .8;
}
+
+.good figure {
+ animation: celebration 5s linear infinite;
+ background: none;
+ border: 0;
+}
+@keyframes celebration {
+ 0% { filter: hue-rotate(0deg); transform: rotate(0deg) }
+ 50% { filter: hue-rotate(180deg); transform: rotate(180deg) }
+ 100% { filter: hue-rotate(360deg); transform: rotate(360deg) }
+}
</style>
EOT
});