CSS Hareketli Harf Efekt

• 18-01-2017
• Admin
• 4110 Okunma
• Paylaş
• Paylaş
• Paylaş

CSS

@keyframes style1 {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0.5,0.1);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0px, -35px, 0);
  }
}

@keyframes style2 {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, .95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes style3 {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes style4 {
  from, 20%, 40%, 60%, 80%, to {
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      opacity: 0;
      transform: scale3d(.3, .3, .3);
    }
    20% {
      transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
      transform: scale3d(.9, .9, .9);
    }
    60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      transform: scale3d(.97, .97, .97);
    }
    to {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
}

style CSS

<style type='text/css'>

.is-animate.style1 > div { animation-name: style1; }

.is-animate > div {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.is-animate > div:nth-child(1) { animation-delay: 0.0s }
.is-animate > div:nth-child(2) { animation-delay: 0.1s }
.is-animate > div:nth-child(3) { animation-delay: 0.2s }
.is-animate > div:nth-child(4) { animation-delay: 0.3s }
.is-animate > div:nth-child(5) { animation-delay: 0.4s }
.is-animate > div:nth-child(6) { animation-delay: 0.5s }
.is-animate > div:nth-child(7) { animation-delay: 0.6s }
.is-animate > div:nth-child(8) { animation-delay: 0.7s }
.is-animate > div:nth-child(9) { animation-delay: 0.8s }

</style>

HTML

<div class='is-animate style1'>
  <div>s</div>
  <div>u</div>
  <div>a</div>
  <div>t</div>
  <div>d</div>
  <div>i</div>
  <div>l</div>
  <div>e</div>
  <div>k</div>
</div>