10 Gaya Efek CSS Animasi Pada Teks

Yang perlu Anda lakukan disini adalah bagaimana merangkai bentuk elemen CSS untuk membuat objek bergerak dengan efek-animasi berdasarkan konsep deklerasi struktur seperti menata letak:

• infinite (gerak tidak terbatas),
• delay (penundaan),
• ease-in (pergerakan kedalam secara perlahan),
• duration (lama waktu gerak),
• dan masih banyak lagi...

Agar dengan mudah kita membentuk gaya efeknya dengan perintah @keyframes media. Namun sebelumnya, ada baiknya Anda mengenal Inilah Beberapa Nama Efek Serta Cara Kerjanya terlebih dahulu, setelahnya Anda tinggal pilih salah satu dari 10 Gaya Efek CSS Animasi Pada Teks berikut:




DEMO SHOW

<style type='text/css'>
.sentence{color: #fff;font-size: 30px;text-align: left}
.wrapper{font-family: sans-serif;margin: 0 auto;position: relative}

/*1. Vertical Sliding*/
.slidingVertical{display: inline;text-indent: 8px;}
.slidingVertical span{
  animation: topToBottom 12.5s linear infinite 0s;
  -moz-animation: topToBottom 12.5s linear infinite 0s;
  -webkit-animation: topToBottom 12.5s linear infinite 0s;
  color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.slidingVertical span:nth-child(2) {
  animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s}

.slidingVertical span:nth-child(3) {
  animation-delay: 5s;
  -moz-animation-delay: 5s;
  -webkit-animation-delay: 5s}

.slidingVertical span:nth-child(4) {
  animation-delay: 7.5s;
  -moz-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s}

.slidingVertical span:nth-child(5) {
  animation-delay: 10s;
  -moz-animation-delay: 10s;
  -webkit-animation-delay: 10s}

@keyframes topToBottom {
 0% {opacity: 0;}
 5% {opacity: 0;transform: translateY(-50px)}
 10% {opacity: 1;transform: translateY(0px)}
 25% {opacity: 1;transform: translateY(0px)}
 30% {opacity: 0;transform: translateY(50px)}
 80% {opacity: 0}
 100% {opacity: 0}}

/*2. Horizontal Sliding*/
.slidingHorizontal {display: inline;text-indent: 8px;}
.slidingHorizontal span {
  animation: leftToRight 12.5s linear infinite 0s;
  -moz-animation: leftToRight 12.5s linear infinite 0s;
  -webkit-animation: leftToRight 12.5s linear infinite 0s;
  color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.slidingHorizontal span:nth-child(2) {animation-delay: 2.5s}
.slidingHorizontal span:nth-child(3) {animation-delay: 5s}
.slidingHorizontal span:nth-child(4) {animation-delay: 7.5s}
.slidingHorizontal span:nth-child(5) {animation-delay: 10s}

@keyframes leftToRight {
 0% {opacity: 0;}
 5% {opacity: 0; transform: translateX(-50px);}
 10% {opacity: 1; transform: translateX(0px);}
 25% {opacity: 1; transform: translateX(0px);}
 30% {opacity: 0; transform: translateX(50px);}
 80% {opacity: 0;}
 100% {opacity: 0;}}

/*3. FadeIn*/
.fadeIn{display: inline;text-indent: 8px}
.fadeIn span{
 animation: fadeEffect 12.5s linear infinite 0s;
 -moz-animation: fadeEffect 12.5s linear infinite 0s;
 -webkit-animation: fadeEffect 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.fadeIn span:nth-child(2) {animation-delay: 2.5s}
.fadeIn span:nth-child(3) {animation-delay: 5s}
.fadeIn span:nth-child(4) {animation-delay: 7.5s}
.fadeIn span:nth-child(5) {animation-delay: 10s}

@keyframes fadeEffect{
 0% { opacity: 0; }
 5% { opacity: 0; transform: translateY(0px); }
 10% { opacity: 1; transform: translateY(0px); }
 25% { opacity: 1; transform: translateY(0px); }
 30% { opacity: 0; transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0 }}

/*4. Vertical Flip*/
.verticalFlip{display: inline;text-indent: 8px}
.verticalFlip span{
 animation: vertical 12.5s linear infinite 0s;
 -moz-animation: vertical 12.5s linear infinite 0s;
 -webkit-animation: vertical 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.verticalFlip span:nth-child(2) {animation-delay: 2.5s}
.verticalFlip span:nth-child(3) {animation-delay: 5s}
.verticalFlip span:nth-child(4) {animation-delay: 7.5s}
.verticalFlip span:nth-child(5) {animation-delay: 10s}

@-moz-keyframes vertical{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotateX(180deg); }
 10% { opacity: 1; transform: translateY(0px); }
 25% { opacity: 1; transform: translateY(0px); }
 30% { opacity: 0; transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0}}

/*5. Horizontal Flip*/
.horizontalFlip {display: inline;text-indent: 8px}
.horizontalFlip span {
 animation: horizontal 12.5s linear infinite 0s;
 -moz-animation: horizontal 12.5s linear infinite 0s;
 -webkit-animation: horizontal 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.horizontalFlip span:nth-child(2) {animation-delay: 2.5s}
.horizontalFlip span:nth-child(3) {animation-delay: 5s}
.horizontalFlip span:nth-child(4) {animation-delay: 7.5s}
.horizontalFlip span:nth-child(5) {animation-delay: 10s}

@keyframes horizontal{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotateY(180deg); }
 10% { opacity: 1; transform: translateX(0px); }
 25% { opacity: 1; transform: translateX(0px); }
 30% { opacity: 0; transform: translateX(0px); }
 80% { opacity: 0; }
 100% { opacity: 0}}

/*6. AntiClockWise Effect*/
.antiClock{display: inline;text-indent: 8px}
.antiClock span{
 animation: anti 12.5s linear infinite 0s;
 -moz-animation: anti 12.5s linear infinite 0s;
 -webkit-animation: anti 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.antiClock span:nth-child(2) {animation-delay: 2.5s}
.antiClock span:nth-child(3) {animation-delay: 5s}
.antiClock span:nth-child(4) {animation-delay: 7.5s}
.antiClock span:nth-child(5) {animation-delay: 10s}

@keyframes anti{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotateX(180deg); }
 10% { opacity: 1; transform: translateY(0px); }
 25% { opacity: 1; transform: translateY(0px); }
 30% { opacity: 0; transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0}}

/*7. ClockWise Effect*/
.clockWise{display: inline;text-indent: 8px}
.clockWise span{
 animation: clock 12.5s linear infinite 0s;
 -moz-animation: clock 12.5s linear infinite 0s;
 -webkit-animation: clock 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.clockWise span:nth-child(2) {animation-delay: 2.5s}
.clockWise span:nth-child(3) {animation-delay: 5s}
.clockWise span:nth-child(4) {animation-delay: 7.5s}
.clockWise span:nth-child(5) {animation-delay: 10s}

@keyframes clock{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotate(-180deg); }
 10% { opacity: 1; transform: translateX(0px); }
 25% { opacity: 1; transform: translateX(0px); }
 30% { opacity: 0; transform: translateX(0px); }
 80% { opacity: 0; }
 100% { opacity: 0}}

/*8. Pop Effect*/
.popEffect{display: inline;text-indent: 8px}
.popEffect span{
 animation: pop 12.5s linear infinite 0s;
 -moz-animation: pop 12.5s linear infinite 0s;
 -webkit-animation: pop 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.popEffect span:nth-child(2) {animation-delay: 2.5s}
.popEffect span:nth-child(3) {animation-delay: 5s}
.popEffect span:nth-child(4) {animation-delay: 7.5s}
.popEffect span:nth-child(5) {animation-delay: 10s}

@keyframes pop{
 0% { opacity: 0; }
 5% { opacity: 0; transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
 10% { opacity: 1; transform: translateY(0px); }
 25% { opacity: 1; transform: translateY(0px); }
 30% { opacity: 0; transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0;}}

/*9. Push Effect*/
.pushEffect {display: inline;text-indent: 8px}
.pushEffect span{
 animation: push 12.5s linear infinite 0s;
 -moz-animation: push 12.5s linear infinite 0s;
 -webkit-animation: push 12.5s linear infinite 0s;
 color: #FC6;opacity: 0;overflow: hidden;position: absolute}

.pushEffect span:nth-child(2) {animation-delay: 2.5s}
.pushEffect span:nth-child(3) {animation-delay: 5s}
.pushEffect span:nth-child(4) {animation-delay: 7.5s}
.pushEffect span:nth-child(5) {animation-delay: 10s}

@keyframes push{
  0% {opacity: 0}
  5% {opacity: 0; transform: rotate(0deg) scale(2) skew(0deg) translate(0px)}
  10% {opacity: 1; transform: translateX(0px)}
  25% {opacity: 1; transform: translateX(0px)}
  30% {opacity: 0; transform: translateX(0px)}
  80% {opacity: 0}
  100% {opacity: 0}}

/*10. Falling Effect*/
.falling{display: inline;text-indent: 8px;}
.falling span{
  position: absolute;opacity: 0;overflow: hidden;color: #FC6;
  -webkit-transform-origin: 5% 75%;
  -moz-transform-origin: 5% 75%;
  transform-origin: 5% 75%;
  -webkit-animation: rotateWord 12.5s linear infinite 0s;
  -moz-animation: rotateWord 12.5s linear infinite 0s;
  animation: rotateWord 12.5s linear infinite 0s}

.falling span:nth-child(2) {animation-delay: 2.5s}
.falling span:nth-child(3) {animation-delay: 5s}
.falling span:nth-child(4) {animation-delay: 7.5s}
.falling span:nth-child(5) {animation-delay: 10s}

@keyframes rotateWord {
  0% {opacity: 0}
  5% {opacity: 1}
  17% {opacity: 1; transform: rotate(0deg)}
  19% {opacity: 1; transform: rotate(98deg)}
  21% {opacity: 1; transform: rotate(86deg)}
  23% {opacity: 1; transform: translateY(85px) rotate(83deg)}
  25% {opacity: 0; transform: translateY(170px) rotate(80deg)}
  80% {opacity: 0;}
  100%{opacity: 0}}
</style>

<div class="wrapper">
   <div class="sentence"> //Vertical Sliding Effect...
      Teks Anda Disini...<div class="slidingVertical">
          <span>Amazing</span>
          <span>Beautiful</span>
          <span>Cute</span>
          <span>Delightful</span>
          <span>Emotional</span>
      </div>
   </div>

   <div class="sentence"> //Slidding Horizontal Effect...
      Teks Anda Disini...<div class="slidingHorizontal">
          <span>Teks 1...</span>
          <span>Teks 2...</span>
          <span>Teks 3...</span>
          <span>Teks 4...</span>
          <span>Teks 5...</span>
      </div>
   </div>

   <div class="sentence"> //Fade In Effect...
<!..dan seterusnya..!>
// perhatikan elemen CSS, efek apa yang akan Anda gunakan.
// lalu panggil nama efeknya dengan atibut class="effect-name"
...
</div><!..ending wrapper..!>

Bagaimana dengan 10 Gaya Efek CSS Animasi Pada Teks diatas.?, sudah menemukan pilihan efek yang cocok untuk mempercantik tampilan blog Anda..!!?