Trick CSS3 Daun Berjatuhan

Setelah kita bisa membuat efek salju menggunakan CSS3 dengan variabel Keyframe Animations, sekarang bagaimana membuat efek daun berjatuhan masih memakai atribut CSS3! Namun sekarang ada variable tambahan yakni CSS3 :nth-child() Selector. Dalam pemanggilan markup html nanti akan memakai span. Jadi perhatikanlah pada kode span:nth-child(). Disitulah kita akan bermain efek muncul daun mau seberapa banyak dan seberapa waktu muncul (dalam hitungan detik) :-/
Mungkin bingung karena tidak ada demonya. Sebelum masuk ke demo, sobat bila mau memakai trik ini harus menyediakan terlebih dahulu image (gambar) daun. Tentukan tinggi & lebar mau segimana terlebih dahulu. Optimal bagusnya gunakan saja resolusi 30 x 30 px saja biar imut² sob :D Inti dari trik jatuh daun memakai CSS-3 terdapat pada kita bermain dengan code @keyframes dan span:nth-child() saja!

Demo CSS3 Trick Daun Berjatuhan

http://jsbin.com/ozoxiw

CSS3 Coded

.daun {
text-align: center;
height:100%;
width:100%;
overflow:hidden;
}
.daun span {
display: inline-block;
margin: -150px 5px 0px 5px;
background: transparent;
background:url("http://link-image-daun-30x30px.png");
-webkit-animation: daun 10s infinite linear;
-moz-animation: daun 10s infinite linear;
}
.daun span:nth-child(5n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
}
.daun span:nth-child(8n+3) {
-webkit-animation-delay: 1.9s;
-moz-animation-delay: 1.9s;
}
.daun span:nth-child(2n+5) {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
}
.daun span:nth-child(6n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
}
.daun span:nth-child(7n+4) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
}
.daun span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
}
.daun span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
}
@-webkit-keyframes daun {
0% {
width: 30px;
height: 30px;
opacity: 1;
-webkit-transform: translate(0px, 0px) rotateZ(0deg);
}
25% {
width: 30px;
height: 30px;
opacity: 0.8;
-webkit-transform: translate(150px, 300px) rotateZ(0deg);
}
50% {
width: 30px;
height: 30px;
opacity: 0.5;
-webkit-transform: translate(-500px, 500px) rotateZ(270deg);
}
100% {
width: 30px;
height: 30px;
opacity: 0.1;
-webkit-transform: translate(350px, 800px) rotateZ(360deg);
}
}
@-moz-keyframes daun {
0% {
width: 30px;
height: 30px;
opacity: 1;
-moz-transform: translate(0px, 0px) rotateZ(0deg);
}
25% {
width: 30px;
height: 30px;
opacity: 0.8;
-moz-transform: translate(150px, 300px) rotateZ(0deg);
}
50% {
width: 30px;
height: 30px;
opacity: 0.5;
-moz-transform: translate(-500px, 500px) rotateZ(270deg);
}
100% {
width: 30px;
height: 30px;
opacity: 0.1;
-moz-transform: translate(350px, 800px) rotateZ(360deg);
}
}

Markup HTML

<div class="daun">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Bila demo dirasa kurang menarik karena tidak memakai gambar background sobat bisa satroni web sumber dan pelajari lebih detail disana ya CSS3 Tricks Falling Leaves with CSS only by PremiumCoding.
NB:
-WTF-transform: translate(XXXpx, XXXpx) rotateZ(0deg);

• XXXpx: Jatuh daun mau ke kiri/kanan. Bila mau ke kiri tambahkan saja -XXXpx.
• XXXpx: Kecepetan daun jatuh.
• 0deg: Rotasi efek gambar.

Happy coding CSS3 \m/