Tasswon
diff --git a/‎img/39058.png
205 KB b/‎img/39058.png
205 KB
diff --git a/‎img/Background.jpg
178 KB b/‎img/Background.jpg
178 KB
diff --git a/‎img/Block.gif
6.97 KB b/‎img/Block.gif
6.97 KB
diff --git a/‎img/VW2DYbL.png
452 KB b/‎img/VW2DYbL.png
452 KB
diff --git a/‎img/flare_sprite_sheet__battle__by_gambiller-d5ktgi5.png
167 KB b/‎img/flare_sprite_sheet__battle__by_gambiller-d5ktgi5.png
167 KB
diff --git a/‎img/mario-jump.png
1.78 KB b/‎img/mario-jump.png
1.78 KB
diff --git a/‎img/mario.png
5.63 KB b/‎img/mario.png
5.63 KB
diff --git a/‎img/mushroom.png
1.33 KB b/‎img/mushroom.png
1.33 KB
diff --git a/‎img/runningcat.png
156 KB b/‎img/runningcat.png
156 KB
diff --git a/‎img/scottpilgrim_multiple.png
7.86 KB b/‎img/scottpilgrim_multiple.png
7.86 KB
diff --git a/‎img/stars.gif
16 KB b/‎img/stars.gif
16 KB
diff --git a/‎index.html
Lines changed: 19 additions & 0 deletions b/‎index.html
Lines changed: 19 additions & 0 deletions
diff --git a/‎styles.css
Lines changed: 99 additions & 0 deletions b/‎styles.css
Lines changed: 99 additions & 0 deletions
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>CSS Animation</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="stars">
+        <h1>ALWAYS MOVE FORWARD!</h1>
+    </div>
+    <div id="container">
+        <div id="background"></div>
+    </div>
+    <div id="spriteHolder">
+        <img id="sprite" alt="sprite" src="img/scottpilgrim_multiple.png" width="850px" height="225px">      
+    </div>         
+</body>
+</html>
@@ -0,0 +1,99 @@
+#stars {
+    position:absolute;
+    top: 30px;
+    background-image: url(img/stars.gif);
+    width: 1300px;
+    height: 530px;
+    z-index: 1;
+    animation: reveal linear 10s infinite;
+    opacity: 0;
+}
+
+@keyframes reveal {
+    0%{
+       color:transparent;
+       opacity: 0;
+    }
+    25% {
+        color:transparent;
+        opacity: 0.25;
+    }
+    50% {
+        text-align: center;
+        color: white;
+        font-size: 30px;
+        opacity: 1;
+    }
+    75% {
+        text-align: center;
+        font-size: 30px;
+        opacity: 0.25;
+    }
+    100%{
+        text-align: center;
+        font-size: 30px;
+        opacity: 0;
+    }
+}
+
+#container {
+    width:1300px;
+    height:700px;
+    overflow:hidden;
+    z-index: 0;
+}
+
+#background {
+    position:relative;
+    background: url(img/Background.jpg);
+    background-repeat: repeat-x;
+    background-size: contain;
+    width: 2800px;
+    height: 700px;
+    animation: background-move linear 10s infinite;
+}
+
+@keyframes background-move {
+    0%{
+        right: 0px;
+        filter: brightness(1.25);
+    }
+    25% {
+        filter:brightness(0.5);
+    }
+    50% {
+        filter:brightness(0);
+    }
+    75% {
+        filter:brightness(0);
+    }
+    100%{
+        right: 1230px; filter:brightness(1.25);
+    }
+}
+
+#spriteHolder {
+    position: absolute;
+    top: 385px;
+    left: 400px;
+    width: 108px;
+    height: 225px;
+    overflow:hidden;
+    z-index: 2;
+}
+
+#sprite {
+    animation: sprite-run 1s steps(8) infinite;
+}
+
+@keyframes sprite-run {
+    0% {
+        position:relative; 
+        left: 0px; 
+    }
+    
+    100% {
+        position:relative; 
+        left: -850px;
+    }
+}