tool selection and play/skip animation

1 files changed, 30 insertions, 0 deletions

diff --git a/components/play-skip_60fps.css b/components/play-skip_60fps.css
new file mode 100644
index 0000000..aae3a65
--- /dev/null
+++ b/components/play-skip_60fps.css
@@ -0,0 +1,30 @@
+@keyframes skip {
+	0% { left: 0px; }
+	100% { left: -432px; }
+}
+
+@keyframes play {
+	0% { left: -432px; }
+	100% { left: 0px; }
+}
+
+.shapeshifter {
+	width: 24px;
+	height: 24px;
+	overflow: hidden;
+	position: relative;
+	line-height: 0;
+}
+
+.shapeshifter svg {
+	position: absolute;
+	fill: currentColor;
+	left: 0;
+
+	animation-name: var(--ani-state);
+	animation-fill-mode: both;
+	animation-duration: 200ms;
+	animation-timing-function: steps(18);
+	animation-play-state: running;
+}
+