Add animations with rotate-slide, remove footer

szynszyliszys · Mar 7, 2016 · dc835c5 · dc835c5
1 parent 2897909
commit dc835c5
Show file tree

Hide file tree

Showing 14 changed files with 388 additions and 11 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "repaintless",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "homepage": "https://github.com/szynszyliszys/repaintless",
   "authors": [
     "Anna Migas <amjmigas@gmail.com>"

diff --git a/demo/css/repaintless.css b/demo/css/repaintless.css
@@ -452,3 +452,135 @@
   -webkit-animation-timing-function: ease-in-out;
           animation-timing-function: ease-in-out;
 }
+
+@-webkit-keyframes rotate-slide-from-right {
+  0% {
+    -webkit-transform: translateX(200px) rotate(1turn);
+            transform: translateX(200px) rotate(1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes rotate-slide-from-right {
+  0% {
+    -webkit-transform: translateX(200px) rotate(1turn);
+            transform: translateX(200px) rotate(1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.rotate-slide-from-right {
+  -webkit-animation-name: rotate-slide-from-right;
+          animation-name: rotate-slide-from-right;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes rotate-slide-from-left {
+  0% {
+    -webkit-transform: translateX(-200px) rotate(-1turn);
+            transform: translateX(-200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes rotate-slide-from-left {
+  0% {
+    -webkit-transform: translateX(-200px) rotate(-1turn);
+            transform: translateX(-200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.rotate-slide-from-left {
+  -webkit-animation-name: rotate-slide-from-left;
+          animation-name: rotate-slide-from-left;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes rotate-slide-from-top {
+  0% {
+    -webkit-transform: translateY(-200px) rotate(-1turn);
+            transform: translateY(-200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes rotate-slide-from-top {
+  0% {
+    -webkit-transform: translateY(-200px) rotate(-1turn);
+            transform: translateY(-200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.rotate-slide-from-top {
+  -webkit-animation-name: rotate-slide-from-top;
+          animation-name: rotate-slide-from-top;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes rotate-slide-from-bottom {
+  0% {
+    -webkit-transform: translateY(200px) rotate(-1turn);
+            transform: translateY(200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes rotate-slide-from-bottom {
+  0% {
+    -webkit-transform: translateY(200px) rotate(-1turn);
+            transform: translateY(200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.rotate-slide-from-bottom {
+  -webkit-animation-name: rotate-slide-from-bottom;
+          animation-name: rotate-slide-from-bottom;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
diff --git a/demo/css/styles.css b/demo/css/styles.css
@@ -420,8 +420,8 @@ body {
 
 .main-container {
   position: relative;
-  height: 500px;
-  margin-top: 250px;
+  height: 510px;
+  margin-top: 255px;
 }
 
 .element-animated {
@@ -506,6 +506,22 @@ body {
   margin-left: 150px;
 }
 
+.element-animated.rotate-slide-from-right {
+  background-color: #e74c3c;
+}
+
+.element-animated.rotate-slide-from-left {
+  background-color: #e74c3c;
+}
+
+.element-animated.rotate-slide-from-top {
+  background-color: #27ae60;
+}
+
+.element-animated.rotate-slide-from-bottom {
+  background-color: #27ae60;
+}
+
 a {
   color: #00aeef;
   text-decoration: none;

diff --git a/demo/index.html b/demo/index.html
@@ -27,9 +27,10 @@
     <div class="element-animated fade-in long"></div>
     <div class="element-animated pulsate"></div>
     <div class="element-animated rotate long"></div>
+    <div class="element-animated rotate-slide-from-right"></div>
+    <div class="element-animated rotate-slide-from-left"></div>
+    <div class="element-animated rotate-slide-from-top"></div>
+    <div class="element-animated rotate-slide-from-bottom"></div>
   </div>
-  <footer role="contentinfo">
-    <p>From <a href="http://lunarlogic.io">Lunar Logic</a> with &#9825</p>
-  </footer>
 </body>
 </html>
diff --git a/demo/scss/pages/_demo-page-styles.scss b/demo/scss/pages/_demo-page-styles.scss
@@ -1,5 +1,5 @@
 $element-side-size: 100px;
-$main-container-height: $element-side-size*5;
+$main-container-height: ($element-side-size*5)+10px;
 
 .main-container {
   position: relative;
@@ -51,6 +51,22 @@ $main-container-height: $element-side-size*5;
     margin-top: 0;
     margin-left: $element-side-size*1.5;
   }
+
+  &.rotate-slide-from-right {
+    background-color: $demo-item-red;
+  }
+
+  &.rotate-slide-from-left {
+    background-color: $demo-item-red;
+  }
+
+  &.rotate-slide-from-top {
+    background-color: $demo-item-green;
+  }
+
+  &.rotate-slide-from-bottom {
+    background-color: $demo-item-green;
+  }
 }
 
 a {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "repaintless",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Repaintless is a library of CSS animations, which don't cause costly repaints and recalculations in our browser. Animations are smooth and simple.",
   "main": "./repaintless-css/repaintless.css",
   "author": "Anna Migas <amjmigas@gmail.com>",

diff --git a/repaintless-css/repaintless.css b/repaintless-css/repaintless.css
@@ -452,3 +452,135 @@
   -webkit-animation-timing-function: ease-in-out;
           animation-timing-function: ease-in-out;
 }
+
+@-webkit-keyframes rotate-slide-from-right {
+  0% {
+    -webkit-transform: translateX(200px) rotate(1turn);
+            transform: translateX(200px) rotate(1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes rotate-slide-from-right {
+  0% {
+    -webkit-transform: translateX(200px) rotate(1turn);
+            transform: translateX(200px) rotate(1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.rotate-slide-from-right {
+  -webkit-animation-name: rotate-slide-from-right;
+          animation-name: rotate-slide-from-right;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes rotate-slide-from-left {
+  0% {
+    -webkit-transform: translateX(-200px) rotate(-1turn);
+            transform: translateX(-200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes rotate-slide-from-left {
+  0% {
+    -webkit-transform: translateX(-200px) rotate(-1turn);
+            transform: translateX(-200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.rotate-slide-from-left {
+  -webkit-animation-name: rotate-slide-from-left;
+          animation-name: rotate-slide-from-left;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes rotate-slide-from-top {
+  0% {
+    -webkit-transform: translateY(-200px) rotate(-1turn);
+            transform: translateY(-200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes rotate-slide-from-top {
+  0% {
+    -webkit-transform: translateY(-200px) rotate(-1turn);
+            transform: translateY(-200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.rotate-slide-from-top {
+  -webkit-animation-name: rotate-slide-from-top;
+          animation-name: rotate-slide-from-top;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes rotate-slide-from-bottom {
+  0% {
+    -webkit-transform: translateY(200px) rotate(-1turn);
+            transform: translateY(200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+@keyframes rotate-slide-from-bottom {
+  0% {
+    -webkit-transform: translateY(200px) rotate(-1turn);
+            transform: translateY(200px) rotate(-1turn);
+    -webkit-transform-origin: center;
+            transform-origin: center;
+  }
+  100% {
+    -webkit-transform: none;
+            transform: none;
+  }
+}
+
+.rotate-slide-from-bottom {
+  -webkit-animation-name: rotate-slide-from-bottom;
+          animation-name: rotate-slide-from-bottom;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}