Netbyzz

+91 91067 67818

#A046
Text Animation

HTML :

<!-- CODE = #A046 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NETBYZZ A046</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>
        <div>C</div>
        <div>O</div>
        <div>M</div>
        <div>I</div>
        <div>N</div>
        <div>G</div>
        <div></div>
        <div>S</div>
        <div>O</div>
        <div>O</div>
        <div>N</div>
      </h1>
    </header>
  </body>
</html>

CSS :

@import url("https://fonts.googleapis.com/css?family=Oswald");

* {
  margin: 0;
}

header {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #be93c5;
  /* fallback for old browsers */
  background: linear-gradient(to right, #7bc6cc, #be93c5);
}

h1 {
  color: white;
  font-family: "Oswald", sans-serif;
  padding-right: 1em;
}

@-webkit-keyframes example-1 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(9px);
    opacity: 0.0625;
  }
}

@keyframes example-1 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(9px);
    opacity: 0.0625;
  }
}

@-webkit-keyframes example-2 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
    opacity: 0.125;
  }
}

@keyframes example-2 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
    opacity: 0.125;
  }
}

@-webkit-keyframes example-3 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(11px);
    opacity: 0.1875;
  }
}

@keyframes example-3 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(11px);
    opacity: 0.1875;
  }
}

@-webkit-keyframes example-4 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(12px);
    opacity: 0.25;
  }
}

@keyframes example-4 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(12px);
    opacity: 0.25;
  }
}

@-webkit-keyframes example-5 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(13px);
    opacity: 0.3125;
  }
}

@keyframes example-5 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(13px);
    opacity: 0.3125;
  }
}

@-webkit-keyframes example-6 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(14px);
    opacity: 0.375;
  }
}

@keyframes example-6 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(14px);
    opacity: 0.375;
  }
}

@-webkit-keyframes example-7 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(15px);
    opacity: 0.4375;
  }
}

@keyframes example-7 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(15px);
    opacity: 0.4375;
  }
}

@-webkit-keyframes example-8 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(16px);
    opacity: 0.5;
  }
}

@keyframes example-8 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(16px);
    opacity: 0.5;
  }
}

@-webkit-keyframes example-9 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(17px);
    opacity: 0.5625;
  }
}

@keyframes example-9 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(17px);
    opacity: 0.5625;
  }
}

@-webkit-keyframes example-10 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(18px);
    opacity: 0.625;
  }
}

@keyframes example-10 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(18px);
    opacity: 0.625;
  }
}

@-webkit-keyframes example-11 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(19px);
    opacity: 0.6875;
  }
}

@keyframes example-11 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(19px);
    opacity: 0.6875;
  }
}

h1 div:nth-child(1) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-1;
  animation-name: example-1;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(2) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-2;
  animation-name: example-2;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(3) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-3;
  animation-name: example-3;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(4) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-4;
  animation-name: example-4;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(5) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-5;
  animation-name: example-5;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(6) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-6;
  animation-name: example-6;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(7) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-7;
  animation-name: example-7;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(8) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-8;
  animation-name: example-8;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(9) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-9;
  animation-name: example-9;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(10) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-10;
  animation-name: example-10;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

h1 div:nth-child(11) {
  display: inline-block;
  text-shadow: 2px 2px 3px #3d6366;
  -webkit-animation-name: example-11;
  animation-name: example-11;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

Source Code

Download Now