Copied to Clipboard!

DesignDrastic

.title.dna:hover span {
  animation: dnaText 4s infinite;
}
@keyframes  dnaText {
  0%, 100% {
    -webkit-transform: rotateX(0);
       -moz-transform: rotateX(0);
        -ms-transform: rotateX(0);
         -o-transform: rotateX(0);
            transform: rotateX(0);
  }
  50% {
    -webkit-transform: rotateX(360deg);
       -moz-transform: rotateX(360deg);
        -ms-transform: rotateX(360deg);
         -o-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}

DesignDrastic

.title.push:hover span {
  animation: pushText .75s infinite;
}
@keyframes  pushText {
  0%, 100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(.75);
       -moz-transform: scale(.75);
        -ms-transform: scale(.75);
         -o-transform: scale(.75);
            transform: scale(.75);
  }
}

DesignDrastic

.title.wave:hover span {
  animation: waveText .5s infinite;
}
@keyframes  waveText {
  0%, 100% {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
       -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
         -o-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

DesignDrastic

.title.collide:hover span {
  animation: collideText .5s infinite;
}
@keyframes  collideText {
  0%, 100% {
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(7px);
       -moz-transform: translateX(7px);
        -ms-transform: translateX(7px);
         -o-transform: translateX(7px);
            transform: translateX(7px);
  }
}

DesignDrastic

.title.skew:hover span {
  animation: skewText .75s linear infinite;
}
@keyframes  skewText {
  0%, 100% {
    -webkit-transform: skewY(35deg);
       -moz-transform: skewY(35deg);
        -ms-transform: skewY(35deg);
         -o-transform: skewY(35deg);
            transform: skewY(35deg);
  }
  50% {
    -webkit-transform: skewY(-35deg);
       -moz-transform: skewY(-35deg);
        -ms-transform: skewY(-35deg);
         -o-transform: skewY(-35deg);
            transform: skewY(-35deg);
  }
}

DesignDrastic

.title.boom span {
  margin: 0 5px;
}
.title.boom:hover span {
  animation: boomText .25s infinite;
}
@keyframes  boomText {
  0%, 100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.7);
       -moz-transform: scale(1.7);
        -ms-transform: scale(1.7);
         -o-transform: scale(1.7);
            transform: scale(1.7);
  }
}

DesignDrastic

.title.push-pull span {
  margin: 0 5px;
}
.title.push-pull:hover span {
  animation: pushPullText 1s linear infinite;
}
@keyframes  pushPullText {
  0%, 100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  33.33% {
    -webkit-transform: scale(.3);
       -moz-transform: scale(.3);
        -ms-transform: scale(.3);
         -o-transform: scale(.3);
            transform: scale(.3);
  }
  66.66% {
    -webkit-transform: scale(1.7);
       -moz-transform: scale(1.7);
        -ms-transform: scale(1.7);
         -o-transform: scale(1.7);
            transform: scale(1.7);
  }
}

DesignDrastic

.title.zap span {
  margin: 0 3px;
}
.title.zap:hover span {
  animation: zapText .25s infinite;
}
@keyframes  zapText {
  0%, 100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  3% {
    opacity: 0;
    -webkit-transform: scale(1.7);
       -moz-transform: scale(1.7);
        -ms-transform: scale(1.7);
         -o-transform: scale(1.7);
            transform: scale(1.7);
  }
  100% {
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1); 
  }
}

DesignDrastic

.title.in-out span {
  margin: 0 3px;
}
.title.in-out:hover span {
  animation: inOutText 2.5s infinite;
}
@keyframes  inOutText {
  0%, 100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
         -o-transform: scale(1.5);
            transform: scale(1.5);
  }
  50.1% {
    opacity: 1;
    -webkit-transform: scale(.5);
       -moz-transform: scale(.5);
        -ms-transform: scale(.5);
         -o-transform: scale(.5);
            transform: scale(.5);
  }
}

DesignDrastic

.title.out-in span {
  margin: 0 3px;
}
.title.out-in:hover span {
  animation: outInText 2.5s infinite;
}
@keyframes  outInText {
  0%, 100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(.5);
       -moz-transform: scale(.5);
        -ms-transform: scale(.5);
         -o-transform: scale(.5);
            transform: scale(.5);
  }
  50.1% {
    opacity: 1;
    -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
         -o-transform: scale(1.5);
            transform: scale(1.5);
  }
}

DesignDrastic

.title.fade-zoom span {
  margin: 0 5px;
}
.title.fade-zoom:hover span {
  animation: fadeZoomText 3s infinite;
}
@keyframes  fadeZoomText {
  0%, 100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  5% {
    opacity: 0;
    -webkit-transform: scale(1.7);
       -moz-transform: scale(1.7);
        -ms-transform: scale(1.7);
         -o-transform: scale(1.7);
            transform: scale(1.7);
  }
}