About / Contact Animation

Created an about and contact section for my portfolio site. Wanted something a little animated to better illustrate my style. What is a about / contact animation How do you make a about / contact animation? This script and codes were developed by Mark Thomes on 07 September 2021, Tuesday.

How do I make an about / contact animation?
  1. About / Contact Animation Previews
  2. About / Contact Animation HTML Codes
  3. About / Contact Animation CSS Codes
  4. About / Contact Animation JS Codes
About / Contact Animation Previews

About / Contact Animation HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>About / Contact Animation</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='css/7534eb3fb62294822de9eace9.css'>

      <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! */
      * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #333;
  position: relative;
  font-family: 'Quicksand', sans-serif;
}

.ima {
  font-family: 'Asap', sans-serif;
  font-size: 40px;
  text-transform: uppercase;
}

.body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/about-character.png) 0 0 no-repeat;
}

.character, .body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle {
  background-size: 1070px;
  position: absolute;
  display: block;
}

.contactcharacter {
  position: relative;
  display: block;
  overflow: hidden;
  background: #efefef;
}
.contactcharacter .contentwrapper {
  width: 1280px;
  height: 750px;
  margin: 10px auto 0;
  position: relative;
  transition: height 1s ease-in-out;
}
.contactcharacter .character {
  width: 100%;
  height: 750px;
  margin: 0 auto;
  bottom: 0px;
  transition: height 1s ease-in-out;
}
.contactcharacter .body {
  width: 900px;
  height: 425px;
  bottom: -9px;
  left: 0;
  background-position: 0px 0px;
}
.contactcharacter .arm {
  width: 445px;
  height: 115px;
  bottom: -50px;
  left: 25px;
  background-position: -19px -1094px;
  transform: rotateZ(-58deg);
  transform-origin: 2% 50%;
  transition: all .5s ease-in-out;
}
.contactcharacter .arm.active {
  transform: rotateZ(0deg);
}
.contactcharacter .head {
  width: 235px;
  height: 337px;
  bottom: 294px;
  left: 250px;
  background-position: -506px -1093px;
  transform: rotateZ(-24deg);
  transform-origin: 50% 82%;
  transition: all 0.75s cubic-bezier(0.34, -0.305, 0, 1);
}
.contactcharacter .head.caffeine {
  animation: twitch 1s ease-in-out infinite;
}
.contactcharacter .head.active {
  transform: rotateZ(0deg);
}
.contactcharacter .eyes {
  width: 110px;
  height: 25px;
  top: 160px;
  left: 63px;
  background-position: -788px -1246px;
  animation: blink 10s steps(2) infinite;
}
.contactcharacter .caffeine .eyes {
  animation: blink-fast 1s steps(2) infinite;
}
.contactcharacter .mug {
  width: 184px;
  height: 188px;
  bottom: -3px;
  right: 180px;
  background-position: -732px -857px;
}
.contactcharacter .mug .steam {
  animation: steam 3s ease-in-out infinite alternate;
  opacity: 0.5;
}
.contactcharacter .mug .steam:nth-child(1) {
  width: 34px;
  height: 158px;
  top: -140px;
  left: 30px;
  background-position: -537px -855px;
  animation-delay: 0s;
}
.contactcharacter .mug .steam:nth-child(2) {
  width: 37px;
  height: 194px;
  top: -187px;
  left: 80px;
  background-position: -594px -855px;
  animation-delay: 2s;
}
.contactcharacter .mug .steam:nth-child(3) {
  width: 38px;
  height: 187px;
  top: -170px;
  left: 131px;
  background-position: -658px -855px;
  animation-delay: 1s;
}
.contactcharacter .thoughts {
  width: 751px;
  height: 390px;
  top: 0px;
  right: 0px;
  background-position: -321px -459px;
  animation: bob 4s ease-in-out infinite alternate;
  transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26);
  transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .abouttype {
  text-align: center;
  padding: 90px 80px 60px 100px;
}
.contactcharacter .thoughts .abouttype #ima {
  font-size: 40px;
  text-transform: uppercase;
}
.contactcharacter .thoughts .abouttype p {
  font-size: 24px;
  line-height: 1.45em;
}
.contactcharacter .thoughts .abouttype p:nth-child(1) {
  margin-bottom: 0;
}
.contactcharacter .thoughts .abouttype p:nth-child(3) {
  margin-top: 0;
}
.contactcharacter .thoughts .imawhat {
  display: none;
}
.contactcharacter .thoughts .bubble {
  animation: bob 2s ease-in-out infinite alternate;
}
.contactcharacter .thoughts .bubble:nth-child(2) {
  width: 120px;
  height: 116px;
  top: 40px;
  left: -100px;
  background-position: -191px -472px;
  animation-delay: 0s;
  transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26);
  transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(3) {
  width: 91px;
  height: 86px;
  top: 80px;
  left: -190px;
  background-position: -86px -472px;
  animation-delay: 2s;
  transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26);
  transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(4) {
  width: 67px;
  height: 65px;
  top: 120px;
  left: -260px;
  background-position: 0px -474px;
  animation-delay: 1s;
  transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26);
  transition-property: left, right, top, bottom;
}
.contactcharacter .contactme {
  width: 207px;
  height: 196px;
  bottom: -3px;
  right: 309px;
  background-position: -300px -856px;
  cursor: pointer;
}
.contactcharacter .contactme .arrow {
  width: 263px;
  height: 146px;
  top: -95px;
  left: -23px;
  background-position: -17px -856px;
  animation: bob 1s ease-in-out infinite alternate;
  cursor: arrow;
}

.contactcharacter button {
  position: absolute;
  bottom: 0;
  right: 0;
}
.contactcharacter .contact {
  width: 750px;
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateY(360px);
  margin-left: -375px;
}
.contactcharacter .contact.inactive {
  animation: popout 0.5s forwards linear;
}
.contactcharacter .contact.active {
  animation: popin 0.35s forwards linear;
}
.contactcharacter .contact.active .closer {
  background: #333;
  border: 2px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  position: absolute;
  cursor: pointer;
  border-radius: 15px;
}
.contactcharacter .contact.active .closer:after, .contactcharacter .contact.active .closer:before {
  content: " ";
  position: absolute;
  top: 11px;
  left: 4px;
  width: 18px;
  height: 4px;
  background: white;
}
.contactcharacter .contact.active .closer:after {
  transform: rotate(45deg);
}
.contactcharacter .contact.active .closer:before {
  transform: rotate(-45deg);
}

@keyframes blink {
  0% {
    background-position: -788px -1246px;
  }
  90% {
    background-position: -788px -1246px;
  }
  100% {
    background-position: -788px -1294px;
  }
}
@keyframes blink-fast {
  0% {
    background-position: -788px -1246px;
  }
  50% {
    background-position: -788px -1246px;
  }
  100% {
    background-position: -788px -1294px;
  }
}
@keyframes blink-fast-small {
  0% {
    background-position: -559px -884px;
  }
  50% {
    background-position: -559px -884px;
  }
  100% {
    background-position: -559px -920px;
  }
}
@keyframes blink-medium {
  0% {
    background-position: -559px -884px;
  }
  90% {
    background-position: -559px -884px;
  }
  100% {
    background-position: -559px -920px;
  }
}
@keyframes twitch {
  0% {
    transform: rotateZ(-24deg);
  }
  25% {
    transform: rotateZ(-25deg);
  }
  50% {
    transform: rotateZ(-23deg);
  }
  75% {
    transform: rotateZ(-25deg);
  }
  100% {
    transform: rotateZ(-24deg);
  }
}
@keyframes twitch-medium {
  0% {
    background-position: -578px -1px;
  }
  50% {
    background-position: -578px -1px;
  }
  100% {
    background-position: -720px -1px;
  }
}
@keyframes bob {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(20px);
  }
}
@keyframes steam {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes popin {
  0% {
    transform: translateY(350px) rotateZ(2.2deg);
  }
  38% {
    transform: translateY(100px) rotateZ(7deg);
  }
  52% {
    transform: translateY(25px) rotateZ(7deg);
  }
  71% {
    transform: translateY(-70px) rotateZ(-0.8deg);
  }
  86% {
    transform: translateY(-65px) rotateZ(-4.1deg);
  }
  90% {
    transform: translateY(-54px) rotateZ(-3.3deg);
  }
  100% {
    transform: translateY(-40px) rotateZ(0deg);
  }
}
@keyframes popout {
  0% {
    transform: translateY(-40px) rotateZ(0deg);
  }
  38% {
    transform: translateY(-54px) rotateZ(-3.3deg);
  }
  52% {
    transform: translateY(-65px) rotateZ(-4.1deg);
  }
  71% {
    transform: translateY(-70px) rotateZ(-0.8deg);
  }
  86% {
    transform: translateY(25px) rotateZ(7deg);
  }
  90% {
    transform: translateY(100px) rotateZ(7deg);
  }
  100% {
    transform: translateY(360px) rotateZ(0deg);
  }
}
@keyframes wiggle {
  0% {
    transform: translateY(-5px) rotateZ(5deg);
  }
  100% {
    transform: translateY(-5px) rotateZ(-5deg);
  }
}
@keyframes pulse-hover {
  0% {
    fill-opacity: 0.8;
  }
  100% {
    fill-opacity: 1;
  }
}
.contact {
  width: 600px;
}

form {
  background: #b3c33a;
  padding: 20px;
  transition: all 2s ease;
}

input[type="text"], input[type="email"], textarea {
  padding: 10px;
  margin-bottom: 10px;
  display: block;
  width: 100%;
  border: none;
  background: #8f9c2e;
  color: #eff3d6;
  letter-spacing: 1px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  background: #6b7423;
  outline: none;
}

input[type="text"], input[type="email"] {
  width: 100%;
}

.input {
  width: 100%;
}

textarea {
  height: 200px;
  resize: none;
}

.contact .input.error {
  border-left: 5px solid red;
  animation: borderColor 0.5s ease-in-out infinite alternate;
}

::-webkit-input-placeholder {
  color: #b3c33a;
  text-transform: uppercase;
  letter-spacing: 2px;
}

input[type="submit"] {
  background: #8f9c2e;
  margin-top: 10px;
  border: none;
  padding: 6.66667px 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  position: relative;
}
input[type="submit"]:hover, input[type="submit"]:focus {
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 3px 0 #6b7423;
}
input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
  background: #7d8828;
}

@keyframes borderColor {
  0% {
    border-color: red;
  }
  100% {
    border-color: #990000;
  }
}

    </style>

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

</head>

<body>
  <link href='http://fonts.googleapis.com/css?family=Quicksand|Asap:700' rel='stylesheet' type='text/css'>

<section class="contactcharacter" id="about">
  <div class="contentwrapper" id="contact">
    
    <div class="character">
      <div class="body"></div>
      <div class="arm"></div>
      <div class="head">
        <div class="eyes"></div>
      </div>
      <div class="mug">
        <div class="steam"></div>
        <div class="steam"></div>
        <div class="steam"></div>
      </div>
      <div class="contactme">
        <div class="arrow"></div>
      </div>
      <div class="thoughts">
        
        <div class="abouttype">
          <p>My name is Mark Thomes. I am a...</p>
          <div class="imacontainer"><span class="ima"></span></div>
          <p>I live in the Twin Cities metro area. I like to craft solutions.</p>

          <span class="imawhat">web designer</span>
          <span class="imawhat">wordpress plugin author</span>
          <span class="imawhat">web developer</span>
          <span class="imawhat">animator</span>
        </div>

        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>

      </div>
    </div>
  </div>
  
  <div class="contact">
    <span class="closer"></span>
    <form>
      <input class="input name"  name="name" type="text" value="" placeholder="name">
      <input class="input email" name="email" type="email" value="" placeholder="email">
      <textarea class="input message" name="message" placeholder="my awesome message!"></textarea>
      <input name="commit" type="submit" value="submit" class="submit">        
    </form>
  </div>
  
</section>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/footer-inject.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

About / Contact Animation CSS Codes

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #333;
  position: relative;
  font-family: 'Quicksand', sans-serif;
}

.ima {
  font-family: 'Asap', sans-serif;
  font-size: 40px;
  text-transform: uppercase;
}

.body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/about-character.png) 0 0 no-repeat;
}

.character, .body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle {
  background-size: 1070px;
  position: absolute;
  display: block;
}

.contactcharacter {
  position: relative;
  display: block;
  overflow: hidden;
  background: #efefef;
}
.contactcharacter .contentwrapper {
  width: 1280px;
  height: 750px;
  margin: 10px auto 0;
  position: relative;
  transition: height 1s ease-in-out;
}
.contactcharacter .character {
  width: 100%;
  height: 750px;
  margin: 0 auto;
  bottom: 0px;
  transition: height 1s ease-in-out;
}
.contactcharacter .body {
  width: 900px;
  height: 425px;
  bottom: -9px;
  left: 0;
  background-position: 0px 0px;
}
.contactcharacter .arm {
  width: 445px;
  height: 115px;
  bottom: -50px;
  left: 25px;
  background-position: -19px -1094px;
  transform: rotateZ(-58deg);
  transform-origin: 2% 50%;
  transition: all .5s ease-in-out;
}
.contactcharacter .arm.active {
  transform: rotateZ(0deg);
}
.contactcharacter .head {
  width: 235px;
  height: 337px;
  bottom: 294px;
  left: 250px;
  background-position: -506px -1093px;
  transform: rotateZ(-24deg);
  transform-origin: 50% 82%;
  transition: all 0.75s cubic-bezier(0.34, -0.305, 0, 1);
}
.contactcharacter .head.caffeine {
  animation: twitch 1s ease-in-out infinite;
}
.contactcharacter .head.active {
  transform: rotateZ(0deg);
}
.contactcharacter .eyes {
  width: 110px;
  height: 25px;
  top: 160px;
  left: 63px;
  background-position: -788px -1246px;
  animation: blink 10s steps(2) infinite;
}
.contactcharacter .caffeine .eyes {
  animation: blink-fast 1s steps(2) infinite;
}
.contactcharacter .mug {
  width: 184px;
  height: 188px;
  bottom: -3px;
  right: 180px;
  background-position: -732px -857px;
}
.contactcharacter .mug .steam {
  animation: steam 3s ease-in-out infinite alternate;
  opacity: 0.5;
}
.contactcharacter .mug .steam:nth-child(1) {
  width: 34px;
  height: 158px;
  top: -140px;
  left: 30px;
  background-position: -537px -855px;
  animation-delay: 0s;
}
.contactcharacter .mug .steam:nth-child(2) {
  width: 37px;
  height: 194px;
  top: -187px;
  left: 80px;
  background-position: -594px -855px;
  animation-delay: 2s;
}
.contactcharacter .mug .steam:nth-child(3) {
  width: 38px;
  height: 187px;
  top: -170px;
  left: 131px;
  background-position: -658px -855px;
  animation-delay: 1s;
}
.contactcharacter .thoughts {
  width: 751px;
  height: 390px;
  top: 0px;
  right: 0px;
  background-position: -321px -459px;
  animation: bob 4s ease-in-out infinite alternate;
  transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26);
  transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .abouttype {
  text-align: center;
  padding: 90px 80px 60px 100px;
}
.contactcharacter .thoughts .abouttype #ima {
  font-size: 40px;
  text-transform: uppercase;
}
.contactcharacter .thoughts .abouttype p {
  font-size: 24px;
  line-height: 1.45em;
}
.contactcharacter .thoughts .abouttype p:nth-child(1) {
  margin-bottom: 0;
}
.contactcharacter .thoughts .abouttype p:nth-child(3) {
  margin-top: 0;
}
.contactcharacter .thoughts .imawhat {
  display: none;
}
.contactcharacter .thoughts .bubble {
  animation: bob 2s ease-in-out infinite alternate;
}
.contactcharacter .thoughts .bubble:nth-child(2) {
  width: 120px;
  height: 116px;
  top: 40px;
  left: -100px;
  background-position: -191px -472px;
  animation-delay: 0s;
  transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26);
  transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(3) {
  width: 91px;
  height: 86px;
  top: 80px;
  left: -190px;
  background-position: -86px -472px;
  animation-delay: 2s;
  transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26);
  transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(4) {
  width: 67px;
  height: 65px;
  top: 120px;
  left: -260px;
  background-position: 0px -474px;
  animation-delay: 1s;
  transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26);
  transition-property: left, right, top, bottom;
}
.contactcharacter .contactme {
  width: 207px;
  height: 196px;
  bottom: -3px;
  right: 309px;
  background-position: -300px -856px;
  cursor: pointer;
}
.contactcharacter .contactme .arrow {
  width: 263px;
  height: 146px;
  top: -95px;
  left: -23px;
  background-position: -17px -856px;
  animation: bob 1s ease-in-out infinite alternate;
  cursor: arrow;
}

.contactcharacter button {
  position: absolute;
  bottom: 0;
  right: 0;
}
.contactcharacter .contact {
  width: 750px;
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateY(360px);
  margin-left: -375px;
}
.contactcharacter .contact.inactive {
  animation: popout 0.5s forwards linear;
}
.contactcharacter .contact.active {
  animation: popin 0.35s forwards linear;
}
.contactcharacter .contact.active .closer {
  background: #333;
  border: 2px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  position: absolute;
  cursor: pointer;
  border-radius: 15px;
}
.contactcharacter .contact.active .closer:after, .contactcharacter .contact.active .closer:before {
  content: " ";
  position: absolute;
  top: 11px;
  left: 4px;
  width: 18px;
  height: 4px;
  background: white;
}
.contactcharacter .contact.active .closer:after {
  transform: rotate(45deg);
}
.contactcharacter .contact.active .closer:before {
  transform: rotate(-45deg);
}

@keyframes blink {
  0% {
    background-position: -788px -1246px;
  }
  90% {
    background-position: -788px -1246px;
  }
  100% {
    background-position: -788px -1294px;
  }
}
@keyframes blink-fast {
  0% {
    background-position: -788px -1246px;
  }
  50% {
    background-position: -788px -1246px;
  }
  100% {
    background-position: -788px -1294px;
  }
}
@keyframes blink-fast-small {
  0% {
    background-position: -559px -884px;
  }
  50% {
    background-position: -559px -884px;
  }
  100% {
    background-position: -559px -920px;
  }
}
@keyframes blink-medium {
  0% {
    background-position: -559px -884px;
  }
  90% {
    background-position: -559px -884px;
  }
  100% {
    background-position: -559px -920px;
  }
}
@keyframes twitch {
  0% {
    transform: rotateZ(-24deg);
  }
  25% {
    transform: rotateZ(-25deg);
  }
  50% {
    transform: rotateZ(-23deg);
  }
  75% {
    transform: rotateZ(-25deg);
  }
  100% {
    transform: rotateZ(-24deg);
  }
}
@keyframes twitch-medium {
  0% {
    background-position: -578px -1px;
  }
  50% {
    background-position: -578px -1px;
  }
  100% {
    background-position: -720px -1px;
  }
}
@keyframes bob {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(20px);
  }
}
@keyframes steam {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes popin {
  0% {
    transform: translateY(350px) rotateZ(2.2deg);
  }
  38% {
    transform: translateY(100px) rotateZ(7deg);
  }
  52% {
    transform: translateY(25px) rotateZ(7deg);
  }
  71% {
    transform: translateY(-70px) rotateZ(-0.8deg);
  }
  86% {
    transform: translateY(-65px) rotateZ(-4.1deg);
  }
  90% {
    transform: translateY(-54px) rotateZ(-3.3deg);
  }
  100% {
    transform: translateY(-40px) rotateZ(0deg);
  }
}
@keyframes popout {
  0% {
    transform: translateY(-40px) rotateZ(0deg);
  }
  38% {
    transform: translateY(-54px) rotateZ(-3.3deg);
  }
  52% {
    transform: translateY(-65px) rotateZ(-4.1deg);
  }
  71% {
    transform: translateY(-70px) rotateZ(-0.8deg);
  }
  86% {
    transform: translateY(25px) rotateZ(7deg);
  }
  90% {
    transform: translateY(100px) rotateZ(7deg);
  }
  100% {
    transform: translateY(360px) rotateZ(0deg);
  }
}
@keyframes wiggle {
  0% {
    transform: translateY(-5px) rotateZ(5deg);
  }
  100% {
    transform: translateY(-5px) rotateZ(-5deg);
  }
}
@keyframes pulse-hover {
  0% {
    fill-opacity: 0.8;
  }
  100% {
    fill-opacity: 1;
  }
}
.contact {
  width: 600px;
}

form {
  background: #b3c33a;
  padding: 20px;
  transition: all 2s ease;
}

input[type="text"], input[type="email"], textarea {
  padding: 10px;
  margin-bottom: 10px;
  display: block;
  width: 100%;
  border: none;
  background: #8f9c2e;
  color: #eff3d6;
  letter-spacing: 1px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  background: #6b7423;
  outline: none;
}

input[type="text"], input[type="email"] {
  width: 100%;
}

.input {
  width: 100%;
}

textarea {
  height: 200px;
  resize: none;
}

.contact .input.error {
  border-left: 5px solid red;
  animation: borderColor 0.5s ease-in-out infinite alternate;
}

::-webkit-input-placeholder {
  color: #b3c33a;
  text-transform: uppercase;
  letter-spacing: 2px;
}

input[type="submit"] {
  background: #8f9c2e;
  margin-top: 10px;
  border: none;
  padding: 6.66667px 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  position: relative;
}
input[type="submit"]:hover, input[type="submit"]:focus {
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 3px 0 #6b7423;
}
input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
  background: #7d8828;
}

@keyframes borderColor {
  0% {
    border-color: red;
  }
  100% {
    border-color: #990000;
  }
}

About / Contact Animation JS Codes

var cnt=0, texts=[];
var $fclick = false;


$(".imawhat").each(function() {
  texts[cnt++]=$(this).text();
});

function fadeText() {
  if (cnt>=texts.length) { cnt=0; }
  $('.ima').html(texts[cnt++]);
  $('.ima')
    .fadeIn('fast').animate({opacity: 1.0}, 5000).fadeOut('fast',
     function() {
       return fadeText();
     }
  );
}

function toggleForm() {
  if ($fclick === true) {
    $(".contact, .head, .arm").toggleClass("active inactive");
  } else {
    $(".contact, .head, .arm").addClass("active");
    $fclick = true;
  }
}

$(".contactme, .arrow, .closer, .submit").on("click", toggleForm);

fadeText();
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.