Add in animation CSS just for the sprite demonstration

trendyminds · Feb 24, 2017 · 46300c7 · 46300c7
1 parent 398551e
commit 46300c7
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/app/assets/_compiled/styles.css b/app/assets/_compiled/styles.css
diff --git a/app/assets/styles/styles.css b/app/assets/styles/styles.css
@@ -55,3 +55,48 @@ body {
 .icon--tie {
   display: inline-block;
 }
+
+@keyframes backgroundRotate {
+  20% {
+    fill: #8577b9;
+  }
+
+  70% {
+    fill: #efc75e;
+  }
+}
+
+@keyframes takeoff {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  30% {
+    transform: translate3d(4rem, -4rem, 0);
+  }
+
+  31% {
+    transform: translate3d(5rem, 5rem, 0);
+  }
+
+  32% {
+    transform: translate3d(-5rem, 5rem, 0);
+  }
+
+  50% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.icon--luggage {
+  border-radius: 100%;
+  overflow: hidden;
+
+  .background {
+    animation: backgroundRotate 5s infinite .5s;
+  }
+
+  .plane {
+    animation: takeoff 5s infinite .5s;
+  }
+}
diff --git a/...yles.c6db25ab139887705339311edb837105.css → ...yles.8f619facbdc2994e88c456335e35276f.css b/...yles.c6db25ab139887705339311edb837105.css → ...yles.8f619facbdc2994e88c456335e35276f.css
diff --git a/dist/index.html b/dist/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Project Generator</title>
-  <link rel="stylesheet" href="/assets/_compiled/styles.c6db25ab139887705339311edb837105.css">
+  <link rel="stylesheet" href="/assets/_compiled/styles.8f619facbdc2994e88c456335e35276f.css">
 </head>
 <body>
   <h1>Project Starter</h1>