Cara Membuat Slide Show Di Css Desktop Mywapblog

TNK Go-Blog on

Minggu, 29 Desember 2013

Keyframe Animasi Sintaks

Deklarasi Dasar & Penggunaan

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+ */
}

Demi singkatnya sisa kode pada halaman ini tidak akan menggunakan prefiks, tapi penggunaan dunia nyata harus menggunakan semua prefiks penjual dari atas

Beberapa langkah

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

#box {
   -animation: fontbulger 2s infinite;
}

Jika animasi memiliki sama memulai dan mengakhiri properti, salah satu cara untuk melakukannya adalah untuk comma-separate the 0% and 100% values:

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

Atau, Anda selalu bisa mengatakan animasi untuk menjalankan dua kali (atau bahkan jumlah kali) dan memberitahu arah untuk bergantian.

Memanggil animasi keyframe dengan sifat yang terpisah

.box {
 animation-name: bounce;
 animation-duration: 4s;
 animation-iteration-count: 10;
 animation-direction: alternate;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-delay: 2s;
}

timing-function	ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
duration & delay	Xs or Xms
duration-count	X
fill-mode	forwards, backwards, both, none
animation-direction	normal, alternate

Animasi Steno

Just-ruang terpisah semua nilai-nilai individu. Urutan tidak masalah kecuali ketika menggunakan kedua durasi dan delay, mereka harus dalam urutan itu. Dalam contoh di bawah 1s = durasi, 2s = delay, 3 = iterasi.

-webkit-animation: test 1s 2s 3 alternate backwards

Kombinasikan mengubah dan animasi

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Beberapa animasi

Anda bisa koma-memisahkan nilai untuk menyatakan beberapa animasi pada pemilih.

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

Langkah-langkah()

Langkah-langkah () fungsi kontrol persis berapa banyak keyframes akan membuat dalam jangka waktu animasi. Katakanlah Anda menyatakan:

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

Jika Anda menggunakan langkah-langkah (10) dalam Anda animasi, itu akan memastikan hanya 10 keyframes terjadi dalam waktu yang ditentukan.

.move {
  animation: move 10s steps(10) infinite alternate;
}

Matematika bekerja dengan baik di sana. Setiap satu detik, elemen akan bergerak 10px ke kiri dan 10px ke bawah, sampai akhir animasi, dan kemudian lagi secara terbalik selamanya.
Hal ini dapat menjadi besar untuk lembaran sprite animasi seperti demo by simurai.

Dukungan Browser

Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

Labels: Css, MyWapBlog

Thanks for reading Cara Membuat Slide Show Di Css Desktop Mywapblog. Please share...!