CSS is AWESOME

...amazing & powerful! Don't you think? :P

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS is AWESOME</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Codystar|Megrim'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background: url(http://neilcarpenter.com/demos/asfalt.png);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 45em;
  height: 35em;
  margin: auto;
  text-align: center;
  color: #fff;
  font-family: "arial";
  letter-spacing: 0.4em;
  overflow: hidden;
}

h1 {
  margin-right: 0.15em;
  font-weight: bold;
  font-size: 17em;
  font-family: "Megrim";
  color: #8e44ad;
  text-shadow: 0 0 0.1em black;
  letter-spacing: 0em;
  animation: space 1.5s forwards ease-out;
  animation-delay: 3.3s;
}
h1 span {
  display: inline-block;
}
h1 span:nth-child(1) {
  animation: fall 1s forwards ease-out alternate;
}
h1 span:nth-child(2) {
  animation: fall2 1.5s forwards ease-out alternate;
}
h1 span:nth-child(3) {
  animation: fall3 2s forwards ease-out alternate;
}

h2 {
  font-size: 3em;
  text-shadow: 0 1em 0.1em black;
  margin-bottom: 0.15em;
}
h2:nth-child(2) {
  animation: fall2 3.7s forwards ease-in-out alternate;
}
h2:nth-child(3) {
  font-size: 4.5em;
  animation: fall3 3.9s forwards ease-in-out alternate;
}
h2:nth-child(4) {
  font-size: 2.8em;
  animation: fall 4.2s forwards ease-in-out alternate;
}

@keyframes space {
  to {
    letter-spacing: -0.17em;
  }
}
@keyframes fall {
  0% {
    transform: translateY(-50em);
  }
}
@keyframes fall2 {
  0% {
    transform: translateX(-50em);
  }
}
@keyframes fall3 {
  0% {
    transform: translateX(50em);
  }
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <h1><span>I</span><span>Y</span><span>S</span></h1>
<h2>it's</h2>
<h2>your</h2>
<h2>space</h2>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background: url(http://neilcarpenter.com/demos/asfalt.png);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 45em;
  height: 35em;
  margin: auto;
  text-align: center;
  color: #fff;
  font-family: "arial";
  letter-spacing: 0.4em;
  overflow: hidden;
}

h1 {
  margin-right: 0.15em;
  font-weight: bold;
  font-size: 17em;
  font-family: "Megrim";
  color: #8e44ad;
  text-shadow: 0 0 0.1em black;
  letter-spacing: 0em;
  animation: space 1.5s forwards ease-out;
  animation-delay: 3.3s;
}
h1 span {
  display: inline-block;
}
h1 span:nth-child(1) {
  animation: fall 1s forwards ease-out alternate;
}
h1 span:nth-child(2) {
  animation: fall2 1.5s forwards ease-out alternate;
}
h1 span:nth-child(3) {
  animation: fall3 2s forwards ease-out alternate;
}

h2 {
  font-size: 3em;
  text-shadow: 0 1em 0.1em black;
  margin-bottom: 0.15em;
}
h2:nth-child(2) {
  animation: fall2 3.7s forwards ease-in-out alternate;
}
h2:nth-child(3) {
  font-size: 4.5em;
  animation: fall3 3.9s forwards ease-in-out alternate;
}
h2:nth-child(4) {
  font-size: 2.8em;
  animation: fall 4.2s forwards ease-in-out alternate;
}

@keyframes space {
  to {
    letter-spacing: -0.17em;
  }
}
@keyframes fall {
  0% {
    transform: translateY(-50em);
  }
}
@keyframes fall2 {
  0% {
    transform: translateX(-50em);
  }
}
@keyframes fall3 {
  0% {
    transform: translateX(50em);
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( CSS is AWESOME ) is write by Brandon Massie, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Brandon Massie