CSS 3 animasyon özelliği ile seken top uyguaması

Hadi Biraz Top sektirelim :)

<style>
#dis {
    width:600px;
    height:300px;}
#daire{
    position:absolute;
    background:green;
    width:50px;
    height:50px;
    border-radius:50px;
    animation-name:yatay, dusey;
    -webkit-animation-name:yatay, dusey;
    animation-duration:6s,3s;
    -webkit-animation-duration:6s,3s;
    animation-timing-function:ease-in-out, ease-in;
    -webkit-animation-timing-function:ease-in-out, ease-in;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    }
@keyframes yatay{
    0%{ left:0px;}
    100%{ left:600px;}
    }
@-webkit-keyframes yatay{
    0%{ left:0px;}
    100%{ left:600px;}
    }
@keyframes dusey{
    0%{ top:0px;}
    20%{ top:40px;}
    40%{ top:0px;}
    60%{ top:160px;}
    80%{ top:0px;}
    100%{ top:250px;}
    }
@-webkit-keyframes dusey{
    0%{ top:0px;}
    20%{ top:40px;}
    40%{ top:0px;}
    60%{ top:160px;}
    80%{ top:0px;}
    100%{ top:250px;}
    }
</style>


<div id="dis">
<div id="daire"></div>
</div>

Programın Çıktısı

Mesaj ve Yorumlar

Yorum Sayısı (0)

ÜYE YORUMLARI

Çevrimiçi :
12
Günlük :
140
Haftalık :
383
Aylık :
1176
Copyright © 2010 İşbara Alp Sönmez – Programlama Örnekleri. Her hakkı saklıdır. www.alpsonmez.com Bu sitedeki herhangi bir içeriğin, "herhangi bir sitede veya forumda" iznim dışında paylaşım yapılması durumunda hukuki dava açacağımı tarafınıza arz ederim. "Öğrenciler dilediği gibi kullanabilir."