update

gamerinshaft · May 30, 2015 · 4f68cae · 4f68cae
1 parent 3ce9e3c
commit 4f68cae
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 5 deletions.
diff --git 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");
+  }
+}
diff --git 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");