Added devanim.less

1 files changed, 332 insertions, 0 deletions

diff --git a/public/css/devanim.less b/public/css/devanim.less
new file mode 100644
index 0000000..ea7f23a
--- /dev/null
+++ b/public/css/devanim.less
@@ -0,0 +1,332 @@
+
+.animation {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.screen {
+  position: relative;
+  border: solid 2px black;
+  margin: 0 auto;
+  margin-top: 100px;
+  background: white;
+  -webkit-animation: devices 9s ease 0s infinite;
+  -moz-animation: devices 9s ease 0s infinite;
+  -o-animation: devices 9s ease 0s infinite;
+  animation: devices 9s ease 0s infinite;
+}
+
+@-webkit-keyframes devices {
+  0% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png');
+	/*background-repeat: no-repeat;*/
+  }
+
+  29% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  33% {
+    top: 68px;
+    width: 280px;
+    height: 210px;
+    border-radius: 5px;
+    border-width: 16px;
+	background-image: url('/img/pad.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  60% {
+    top: 68px;
+    width: 280px;
+    height: 210px;
+    border-radius: 5px;
+    border-width: 16px;
+	background-image: url('/img/pad.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  66% {
+    top: 100px;
+	width: 100px;
+    height: 190px;
+    border-width: 6px;
+    border-top-width: 15px;
+    border-bottom-width: 20px;
+    border-radius: 5px;
+	background-image: url('/img/mobil.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+   94% {
+    top: 100px;
+	width: 100px;
+    height: 190px;
+    border-width: 6px;
+    border-top-width: 15px;
+    border-bottom-width: 20px;
+    border-radius: 5px;
+	background-image: url('/img/mobil.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  100% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png');
+    /*background-repeat: no-repeat;*/
+  }
+}
+moz-webkit-keyframes devices {
+  0% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png');
+	/*background-repeat: no-repeat;*/
+  }
+
+  29% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  33% {
+    top: 68px;
+    width: 280px;
+    height: 210px;
+    border-radius: 5px;
+    border-width: 16px;
+	background-image: url('/img/pad.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  60% {
+    top: 68px;
+    width: 280px;
+    height: 210px;
+    border-radius: 5px;
+    border-width: 16px;
+	background-image: url('/img/pad.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  66% {
+    top: 100px;
+	width: 100px;
+    height: 190px;
+    border-width: 6px;
+    border-top-width: 15px;
+    border-bottom-width: 20px;
+    border-radius: 5px;
+	background-image: url('/img/mobil.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+   94% {
+    top: 100px;
+	width: 100px;
+    height: 190px;
+    border-width: 6px;
+    border-top-width: 15px;
+    border-bottom-width: 20px;
+    border-radius: 5px;
+	background-image: url('/img/mobil.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  100% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png');
+    /*background-repeat: no-repeat;*/
+  }
+}
+@-o-keyframes devices {
+  0% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png');
+	/*background-repeat: no-repeat;*/
+  }
+
+  29% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  33% {
+    top: 68px;
+    width: 280px;
+    height: 210px;
+    border-radius: 5px;
+    border-width: 16px;
+	background-image: url('/img/pad.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  60% {
+    top: 68px;
+    width: 280px;
+    height: 210px;
+    border-radius: 5px;
+    border-width: 16px;
+	background-image: url('/img/pad.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  66% {
+    top: 100px;
+	width: 100px;
+    height: 190px;
+    border-width: 6px;
+    border-top-width: 15px;
+    border-bottom-width: 20px;
+    border-radius: 5px;
+	background-image: url('/img/mobil.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+   94% {
+    top: 100px;
+	width: 100px;
+    height: 190px;
+    border-width: 6px;
+    border-top-width: 15px;
+    border-bottom-width: 20px;
+    border-radius: 5px;
+	background-image: url('/img/mobil.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  100% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png');
+    /*background-repeat: no-repeat;*/
+  }
+}
+@keyframes devices {
+  0% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png');
+	/*background-repeat: no-repeat;*/
+  }
+
+  29% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  33% {
+    top: 68px;
+    width: 280px;
+    height: 210px;
+    border-radius: 5px;
+    border-width: 16px;
+	background-image: url('/img/pad.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  60% {
+    top: 68px;
+    width: 280px;
+    height: 210px;
+    border-radius: 5px;
+    border-width: 16px;
+	background-image: url('/img/pad.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  66% {
+    top: 100px;
+	width: 100px;
+    height: 190px;
+    border-width: 6px;
+    border-top-width: 15px;
+    border-bottom-width: 20px;
+    border-radius: 5px;
+	background-image: url('/img/mobil.png')
+	/*background-repeat: no-repeat;*/
+  }
+
+  94% {
+    top: 100px;
+	width: 100px;
+    height: 190px;
+    border-width: 6px;
+    border-top-width: 7px;
+    border-bottom-width: 10px;
+    border-radius: 2px;
+	background-image: url('/img/mobil.png')
+	background-repeat: no-repeat;
+  }
+
+  100% {
+    top: 0;
+    width: 600px;
+    height: 337px;
+    border-width: 10px;
+    border-radius: 2px;
+    border-bottom-width: 15px;
+	background-image: url('/img/desktop.png')
+	/*background-repeat: no-repeat;*/
+  }
+}
\ No newline at end of file