Html Animasyonlu Yazı Kodu

Html Animasyonlu Yazı Kodu

Html kodu kullanarak sayfanızda animasyonlu yazı görüntülemeye çalışacağız. Html animasyon kodları kullanarak yazıyı farklı renge ve boyuta getirerek animasyon oluşturmaya çalışacağız. Animasyonlu yazı örneğini bir div için de kullanacağız. Animasyon Style kodları içerisinde bulunan (  infinite; ) sonsuz koduna isterseniz bir sayı verip sayıyı tamamlayınca animasyonunuzu durdura bilirsiniz. Style kodları içinde ( color ) yazan renge istediğiniz başlangıç ve bitiş rengini verebilirsiniz.

Html Animasyon Canlı Örneği

Animasyonlu Yazı Örneği

Uygulama Html Kodu

<div class="AnimasyonYazi">
<style>
.animasyon {
  color: orange;
  animation-name: animasyon;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 3.0);
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  }
@keyframes animasyon {
  0%   {
    font-size: 1em;
    }
  50%   {
    font-size: 2em; 
    color: limegreen;
    }
  100%   {
    font-size: 1em;
    }
}
</style>
<h3 class="animasyon">Animations!</h3>
</div>

Html Animasyon Kodu