SEOTurk Forum Üye Girişi Kayıt Ol
Giriş


CSS Animasyon(Animation) Google
Bilge Üye
*****

Mesaj Sayısı: 11
Rep Puanı: 7

Özel Mesaj Gönder E-Posta Gönder
#1
Css ile animasyonlar yapabiliriz.Şimdi size basit bir kare animasyonu yapmını göstereceğim;
PHP Kod: (Hepsini seç)
<!DOCTYPE html>
<
html>
<
head>
<
style>
div {
  width100px;
  height100px;
  background-colorred;
  positionrelative;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-nameexample;
  -webkit-animation-duration5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay2s;
  -webkit-animation-iteration-countinfinite;
  -webkit-animation-directionalternate;
  /* Standard syntax */
  animation-nameexample;
  animation-duration5s;
  animation-timing-function: linear;
  animation-delay2s;
  animation-iteration-countinfinite;
  animation-directionalternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:redleft:0pxtop:0px;}
  25%  {background-color:yellowleft:200pxtop:0px;}
  50%  {background-color:blueleft:200pxtop:200px;}
  75%  {background-color:greenleft:0pxtop:200px;}
  100% {background-color:redleft:0pxtop:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:redleft:0pxtop:0px;}
  25%  {background-color:yellowleft:200pxtop:0px;}
  50%  {background-color:blueleft:200pxtop:200px;}
  75%  {background-color:greenleft:0pxtop:200px;}
  100% {background-color:redleft:0pxtop:0px;}
}
</
style>
</
head>
<
body>

<
p><b>Note:</bThis example does not work in Internet Explorer 9 and earlier versions.</p>

<
div></div>

</
body>
</
html


Bu animasyonumuzda kare şekil kare bir şekil çizerek renk değiştirerek ilerleyecek ve sonra geri gelecek.

[Resim: ZXb38a.gif]


Ek Dosyalar Ekran Görüntüleri
   
04-30-2019, 09:25 AM
Cevapla


« Önceki Konu | Sonraki Konu »

Lütfen Giriş Yapın & Kayıt Olun.
Bize Destek Olmak İçin Lütfen Hemen Giriş Yapın & Kayıt Olun
Hemen Kayıt Ol
Sitemize Çok Kolay Bir Şekilde Kayıt Olabilirsiniz. Kayıt olarak birçok içeriğe ücretsiz erişebilirsiniz !
&
Giriş yap
Zaten Bir Hesabınız Var Mı? Giriş yap.


Anahtar Kelimeler

CSS Animasyon(Animation), CSS Animasyon(Animation) nedir, CSS Animasyon(Animation) nasıl yapılır, CSS Animasyon(Animation) seo, CSS Animasyon(Animation) indir, CSS Animasyon(Animation) hakkında bilgi, CSS Animasyon(Animation) yardım, CSS Animasyon(Animation) hatası, CSS Animasyon(Animation) blog, CSS Animasyon(Animation) ne işe yarar, CSS Animasyon(Animation) ne işe yarar


Hızlı Menü:


Konuyu Okuyanlar: 1 Ziyaretçi