animation test

site/client/app/components/lobby.js

@@ -1,5 +1,5 @@
 module.exports = {
 
-  template: "<h2>lobby hier</h2>"
+  template: require('../views/lobby.html')
 
 };

site/client/app/views/lobby.html

@@ -1 +1,46 @@
-lobby
+<style>
+  .card {
+    float: left;
+    border-radius: 12px;
+  }
+
+  .bla {
+    padding: 5px;
+    float: left;
+    border-radius: 14px;
+    margin: 100px;
+  }
+
+  .ani {
+    background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
+    background-size: 800% 800%;
+
+    -webkit-animation: AnimationName 3s ease infinite;
+    -moz-animation: AnimationName 3s ease infinite;
+    animation: AnimationName 3s ease infinite;
+
+  }
+
+
+  @-webkit-keyframes AnimationName {
+    0%{background-position:51% 0%}
+    50%{background-position:50% 100%}
+    100%{background-position:51% 0%}
+  }
+  @-moz-keyframes AnimationName {
+    0%{background-position:51% 0%}
+    50%{background-position:50% 100%}
+    100%{background-position:51% 0%}
+  }
+  @keyframes AnimationName {
+    0%{background-position:51% 0%}
+    50%{background-position:50% 100%}
+    100%{background-position:51% 0%}
+  }
+</style>
+
+  <div class="bla ani">
+    <img src="http://80.240.132.120/gwent/assets/cards/ballista1.png" class="card" width="150" height="auto">
+  </div>
+
+</div>