Ad styles and keyframes

Author: tajulafreen

Source-Code/JumpGame/style.css

@@ -0,0 +1,111 @@
+* {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  text-align: center;
+  background-color: blue;
+}
+
+.game {
+  top: 40px;
+  width: 500px;
+  height: 200px;
+  border: 1px solid black;
+  margin: 10% auto;
+  background-color: aqua;
+}
+
+h2 {
+  text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
+  color: rgb(0, 247, 255);
+  text-shadow: 3px 2px rgb(128, 0, 0);
+  font-size: 5em;
+}
+
+p {
+  color: white;
+  font-size: 20px;
+}
+
+#character {
+  width: 30px;
+  height: 50px;
+  background-color: red;
+  position: relative;
+  top: 150px;
+  border-radius: 70%;
+}
+
+.animate {
+  animation: jump 0.3s linear;
+}
+
+@keyframes jump {
+  0% {
+    top: 150px;
+  }
+  30% {
+    top: 100px;
+  }
+  70% {
+    top: 100px;
+  }
+  100% {
+    top: 150px;
+  }
+}
+
+#block {
+  background-color: blue;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  top: 130px;
+  left: 500px;
+  animation: block 1s infinite linear;
+}
+
+#block2 {
+  background-color: orange;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  top: 30px;
+  left: 500px;
+}
+
+.animate1 {
+  animation: blocke 1.5s infinite linear;
+}
+
+@keyframes blocke {
+  0% {
+    left: 500px;
+  }
+  100% {
+    left: -20px;
+  }
+}
+
+@keyframes block {
+  0% {
+    left: 500px;
+  }
+  100% {
+    left: -20px;
+  }
+}
+p {
+  text-align: center;
+}
+#co {
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+.animate2 {
+  animation: pa 1s ease-in-out;
+}
+.show {
+  opacity: 0;
+}