From 4f68cae266040237073d1fa65589240128350a27 Mon Sep 17 00:00:00 2001
From: "j.taneichi" <j.tane3ma@gmail.com>
Date: Sat, 30 May 2015 12:05:40 +0900
Subject: [PATCH] update

---
 css/animation.css | 75 +++++++++++++++++++++++++++++++++++++++++++++++
 css/styles.css    | 12 ++++----
 2 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/css/animation.css b/css/animation.css
index e69de29..a43fe3a 100644
--- a/css/animation.css
+++ b/css/animation.css
@@ -0,0 +1,75 @@
+/*
+## Animations
+
+## ここではアニメーションに関するcomponentを記述する
+よろしくね
+
+ */
+
+
+/*
+## Animation screen
+```
+<div class="testbox moveScreen">
+
+</div>
+
+```
+*/
+
+
+.testbox{
+  position: relative;
+  width:  320px;
+  height: 180px;
+  background-image: url("http://switch-box.net/wp-content/uploads/2013/07/wallpaper-soap-bubble-photo-06.jpg?4af819");
+}
+
+.moveScreen{
+  animation-name: moveScreen;
+  -webkit-animation-name: moveScreen;
+
+  animation-duration: 16s;
+  -webkit-animation-duration: 16s;
+
+  animation-timing-function: ease;
+  -webkit-animation-timing-function: ease;
+
+  animation-iteration-count: infinite;
+  -webkit-animation-iteration-count: infinite;
+
+  animation-direction:alternate;
+  -webkit−animation-direction:alternate;
+
+  background-position: center;
+  background-size: cover;
+
+ }
+
+@keyframes moveScreen{
+  0%{
+    background-image: url("http://switch-box.net/wp-content/uploads/2013/07/wallpaper-soap-bubble-photo-06.jpg?4af819");
+  }
+
+  50%{
+    background-image: url("http://pic.prepics-cdn.com/pib34416466/6381710.jpeg");
+  }
+
+  100%{
+    background-image: url("http://switch-box.net/wp-content/uploads/2013/07/wallpaper-soap-bubble-photo-06.jpg?4af819");
+  }
+}
+
+@-webkit-keyframes moveScreen {
+  0%{
+    background-image: url("http://switch-box.net/wp-content/uploads/2013/07/wallpaper-soap-bubble-photo-06.jpg?4af819");
+  }
+
+  50%{
+    background-image: url("http://pic.prepics-cdn.com/pib34416466/6381710.jpeg");
+  }
+
+  100%{
+    background-image: url("http://switch-box.net/wp-content/uploads/2013/07/wallpaper-soap-bubble-photo-06.jpg?4af819");
+  }
+}
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index 359573c..94b9272 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -14,13 +14,15 @@ bootstrapのように利用して簡単にサイトを構築するためのチ
 [Googleマテリアル・デザインから学ぶ４つの重要ポイント + 参考UIデザイン、無料素材まとめ](http://photoshopvip.net/archives/71776)
 */
 
+body{background-color: red;}
+
 /* ### animation ### */
-@import url("animation.css");
+@import url("http://orestrap.azurewebsites.net/css/animation.css");
 
 /* ### Layout ### */
-@import url("layout.css");
-@import url("buttons.css");
-@import url("fixie-demo.css");
+@import url("http://orestrap.azurewebsites.net/css/layout.css");
+@import url("http://orestrap.azurewebsites.net/css/buttons.css");
+@import url("http://orestrap.azurewebsites.net/css/fixie-demo.css");
 
 /* ### Components ### */
-@import url("highlight/styles/googlecode.css");
+@import url("http://orestrap.azurewebsites.net/css/highlight/styles/googlecode.css");