Html ve Css ile Zıplayan Toplar Animasyonu Yapımı

Bu yazımda Css3 ile birlikte gelen animation özelliğini kullanarak zıplayan toplar animasyonu yapacağız.

Animasyonumuzun son hali şu şekilde olacak.

Kodlarımızı yazarken Css3 özelliklerinden animation özelliğini kullanıyoruz. Bu konuda eksikleriniz varsa aşağıdaki linkten ilgili yazımı inceleyebilirsiniz.

Css Animation Kullanımı

Artık kodlarımızı yazmaya başlayalım.

Html Kodları

<div class="balls" id="yellow"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>

Css Kodları

<style>
.balls {
border-radius: 50%;
position: fixed;
width: 100px;
height: 100px;
top: 60%;
animation-name: jump;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#yellow {
background: yellow;
left: 15%;
animation-timing-function: linear;
}
#blue {
background: blue;
left: 30%;
animation-timing-function: ease-out;
}
#green {
background: green;
left: 45%;
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
}
@keyframes jump {
50% {
top: 20%;
}
}
</style>

<style>

.balls {

border-radius: 50%;

position: fixed;

width: 100px;

height: 100px;

top: 60%;

animation-name: jump;

animation-duration: 2s;

animation-iteration-count: infinite;

}

#yellow {

background: yellow;

left: 15%;

animation-timing-function: linear;

}

#blue {

background: blue;

left: 30%;

animation-timing-function: ease-out;

}

#green {

background: green;

left: 45%;

animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);

}

@keyframes jump {

50% {

top: 20%;

}

</style>

Umarım “Html ve Css ile Zıplayan Toplar Animasyonu Yapımı” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

Html ve Css ile Gökyüzü Tasarımı Yapımı

Html ve Css ile Türk Bayrağı Yapımı

Yeni bir yazımda görüşmek üzere.

Html ve Css ile Zıplayan Toplar Animasyonu Yapımı

Yazar Hakkında

Yorum Yazın

Benzer Yazılar

Yazar Hakkında

Yorum Yazın