Ajar anda langkah demi langkah cara menggunakan CSS3 untuk mencapai kesan animasi (perkongsian kod)

Artikel sebelumnya "Artikel H5: Beberapa cara untuk melaksanakan animasi pada halaman? (Kod dilampirkan) " akan menunjukkan kepada anda beberapa cara untuk melaksanakan animasi pada halaman. Artikel berikut akan memperkenalkan kepada anda cara menggunakan CSS3 untuk mencapai kesan animasi yang mudah dan cantik sangat menyukainya pada masa itu, sayangnya masa bergerak ke hadapan. Anggap sahaja artikel ini sebagai dokumen

Sokongan penyemak imbas

Internet Explorer 10, Firefox dan Opera menyokong atribut animasi.

Safari dan Chrome menyokong atribut alternatif -webkit-animasi.

Nota: Internet Explorer 9 dan lebih awal tidak menyokong sifat animasi.

Definisi dan penggunaan

Atribut animasi ialah atribut singkatan untuk menetapkan enam atribut animasi:

nama-animasi

• tempoh-animasi

• fungsi pemasaan-animasi kelewatan-animasi

• kiraan lelaran-animasi animasi-arah

Sintaks

animation: name duration timing-function delay iteration-count direction;

Takrif bingkai utama

值	描述	备注
animation-timing-function	规定动画的速度曲线	可取值为 linear ，ease（淡入淡出），ease-in，ease-out ，ease-in-out，cubic-bezier(n, n, n, n)
animation-play-state	规定动画是否正在运行或暂停。	paused 表示暂停状态，running 表示运行状态
animation-name	规定需要绑定到选择器的 keyframe 名称	@keyframe { from {opcity:0} to {opcity:1}}
animation-iteration-count	规定动画应该播放的次数	可选值为   infinite（无限次）n（比如 5 次）
animation-fill-mode	动画在播放之前或之后，其动画效果是否可见。	none（默认） / forwards（动画完成后） / backwards（在动画显示之前） / both（两者）;
animation-duration	规定完成动画所花费的时间，以秒或毫秒计	必须规定否则，不执行动画
animation-direction	规定是否应该轮流反向播放动画	默认值 normal，alternate 为动画应该轮流反向播放。左右左
animation-delay	规定在动画开始之前的延迟	定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。单位为 s

Firefox menyokong peraturan alternatif @-moz-keyframes; 🎜>

• 
  Safari dan Chrome menyokong peraturan @-webkit-keyframes alternatif; kepada.

• 
  demo Menulis contoh, bumi beredar mengelilingi matahari

• 
  

Berikut ialah kod

@keyframes move {
  0% {
    top: 0px;
    left: 0px;
  }
  25% {
    top: 200px;
    left: 200px;
  }
  50% {
    top: 100px;
    left: 100px;
  }
  75% {
    top: 200px;
    left: 200px;
  }

  100% {
    top: 0px;
    left: 0px;
  }
}

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

Ada demo juga, di sini https://k-ui.cn

Disyorkan untuk belajar

Tutorial video CSS3

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menggunakan CSS3 untuk mencapai kesan animasi (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!