728x90 AdSpace

  • Latest News

    4/04/2013

    CSS3 ile Rüzgar Gülü Animation @keyframes özelliği




    CSS3 ile yeni gelen  özelliklere animation ile devam ediyoruz. Hareketli rüzgar gülü yapıyoruz... Video sıkıştırmada sorunlar oldu bu yüzden görüntü biraz kötü görülüyor fakat kalitesini 480p yaparsanız sorun olmayacaktır...


    CSS Kodları şu şekilde //

    body{background:url(gok.jpg);}
    
    #govde{
    background: url("cbk.png") no-repeat scroll center 110px transparent; height: 250px; left: 200px; position: relative; top: 240px; width: 150px;
    }
    
    img{animation:ruzgar 3s linear infinite;
    animation-play-state:paused;}
    
    img:hover{
    animation-play-state:running;
    }
    
    @keyframes ruzgar{
    100%{transform:rotate(1turn);}
    }


    Animation: ile tanımlanan kısım animasyonun yani @keyframes kısmında tanımladığımız hareketlerin adı, süresi ve devamlılığı belirtiliyor...

    rüzgar 3s üç saniye içerisinde animasyonun gerçekleşeceğini belirtmiş olduk.
    linear kısmı hareketin biçimi ile ilgili. BURADA alabileceği diğer değerler ve aralarında ki farkları görebilirsiniz... Örneğin ease yazmış olsaydık rüzgar gülün de dönme esnasında sona doğru hafif bir yavaşlama olacaktır. linear da ise değişmeyen devamlı/doğrusal bir hız vardır..
    infinite adından da anlaşılacağı gibi sonsuz demektir. Hareket  sonsuza kadar tekrar edecektir. Sayısal değer verirsek hareket verdiğimiz sayı kadar kendisini tekrar eder daha sonra duracaktır.


    animation-play-state 
    iki değer alıyor bunlar yukardaki kod kısmında da mevcut olan paused (durdur) ve running(başlat) hareketi durdura bilir yada devam ettirebiliriz..

    @keyframes: Hareketin gerçekleşme süresi içerisinde olacak olaylar burada belirlenir.  Zamanı belirli hareketlere göre bölebilirsiniz. @keyframes özelliğine ileri ki zmanlarda bir makale yayınlanacak... @keyframes özelliği ile yapılmış animasyonlar buradan indirebilirsiniz.

    Mehmet Ali

    Grafik tasarım konusunda bir şeyler öğrenmekte, öğrenmekte olduklarını paylaşmakta.

    Website: Mhmtalizm

    • Blogger Yorumları
    • Facebook Yorumları

    0 yorum:

    Yorum Gönder

    Item Reviewed: CSS3 ile Rüzgar Gülü Animation @keyframes özelliği Rating: 5 Reviewed By: Kirli Adam
    Scroll to Top