Hari ini cerah

Kata hikmat..
Demo

Langit tak selalu cerah. btw, hari ini cerah Esok belum tentu

↻

HTML view ▼

Kata hikmat..
<div style="background: linear-gradient(140deg, #cccccc 25%, #eeeeee 35%, #dddddd 50%); color: #7f6000; font-family: sans-serif; font-size: 26px; height: 100px; padding-top: 80px; text-align: center;">
<div class="jemek">
  <span style="opacity: 0;">Langit</span>
  <span style="opacity: 0;">tak selalu cerah.</span>
  <span style="opacity: 0;">btw,</span>
  <span style="opacity: 0;">hari ini cerah</span>
  <span style="opacity: 1; margin-left: -96px;">Esok belum tentu</span></div></div>
<div style="margin-right: 10px; text-align: right;"><a href="https://orandableg.blogspot.com/2021/12/hari-ini-cerah.html"><span style="border: 1px solid; padding: 2px;">>></span></a></div>
<style type="text/css">
  .jemek span {
  display: inline-block; position: absolute;
}
.jemek span:nth-child(1) {
  animation: goncang 7s ease-out;
 }
@keyframes goncang {
  0% {
    opacity: 0; margin-left: 0px
  }
  5% {
    opacity: 1; 
  }
  10% {
    opacity: 1; 
  }
  15% {
    opacity: 1; margin-left: 0px
  }
  20% {
    opacity: 1; margin-left: -130px;
    }
  45% {
    opacity: 1; 
    }
  50% {
    opacity: 0; 
    }
  100% {
    opacity: 0; margin-left: -130px;
  }
}
.jemek span:nth-child(2) {
  animation: gelek 7s ease-out; 
}
@keyframes gelek {
 0% {
    opacity: 0; 
  }
  20% {
    opacity: 0; margin-left: -63px; 
  }
  25% {
    opacity: 1; margin-left: -50px;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  45% {
    opacity: 1; 
  }
  50% {
    opacity: 0; 
  }
  100% {
    opacity: 0; margin-left: -50px; 
  }
 }
  .jemek span:nth-child(3) {
  animation: guling 7s ease-out; 
}
@keyframes guling {
 0% {
    opacity: 0;
  }
  50% {
    opacity: 0; margin-left: 0px;
  }
  55% {
    opacity: 1; margin-left: -98px;
  }
  60% {
    opacity: 1; 
  }
  65% {
    opacity: 1; 
  }
  70% {
    opacity: 1;  
  }
  95% {
    opacity: 1; 
  }
  100% {
    opacity: 0; margin-left: -98px; 
  }
 }
  .jemek span:nth-child(4) {
  animation: geleng 8s ease-out; 
}
@keyframes geleng {
 0% {
    opacity: 0; 
  }
  50% {
    opacity: 0; margin-left: -58px; 
  }
  55% {
    opacity: 1; margin-left: -45px;
  }
  85% {
    opacity: 1;
  }
  86% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0; margin-left: -45px; 
  }
}
   .jemek span:nth-child(5) {
  animation: golek 10s ease-out; 
}
@keyframes golek {
 0% {
    opacity: 0;
  }
 70% {
    opacity: 0; margin-left: 80px;
  }
  75% {
    opacity: 0.1; margin-left: -96px;
  }
  
  100% {
    opacity: 1;
  }
}
</style>

Tutup