CSS 动画

CSS 动画

CSS boleh melaksanakan kesan animasi elemen HTML tanpa menggunakan JavaScript atau Flash!

CSS

Dalam bab ini, anda akan belajar seperti berikut atribut:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Pendukung pelayar untuk animasi

Angka di dalam tabel menunjukkan versi paling awal penggunaan penuh atribut ini.

properti Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Apakah animasi CSS?

Animasi menjadikan elemen berubah gaya secara perlahan dari satu gaya kepada gaya lain.

Anda boleh mengubah mana-mana bilangan atribut CSS.

Untuk menggunakan animasi CSS, anda mesti pertama-tama menetapkan beberapa kunci frame untuk animasi.

Kunci frame mengandungi gaya yang dimiliki elemen di masa yang ditetapkan.

@keyframes peraturan

Jika anda dalam @keyframes Peraturan menentukan gaya CSS yang akan berubah secara perlahan dari gaya sekarang kepada gaya baru di masa yang ditetapkan.

Untuk membolehkan animasi berlaku, anda mesti mengikat animasi ke suatu elemen.

Contoh di bawah ini akan mengikat "example" animasi ke elemen <div>. Animasi akan berlanjut selama 4 saat, dan warna latar belakang elemen <div> akan berubah dari "merah" hingga "kuning":

contoh

/* 动画代码 */
@keyframes example {
  dari {warna latar belakang: merah;}
  ke {warna latar belakang: kuning;}
}
/* Laksanakan kesan animasi ke elemen ini */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Coba Sendiri

Perhatian:animation-duration Atribut menentukan berapa lama untuk tamatkan animasi. Jika tiada dinyatakan animation-duration Jika tiada atribut, animasi tidak akan berlaku kerana nilai lalai adalah 0s (0 saat).

Dalam contoh di atas, dengan menggunakan kata kunci "dari" dan "ke" (mewakili 0% (mulai) dan 100% (selesai)), kami menetapkan bila gaya berubah.

Anda juga boleh menggunakan peratusan. Dengan menggunakan peratusan, anda boleh menambah apa pun bilangan yang mana untuk perubahan gaya.

Contoh di bawah ini akan mengubah warna latar <div> elemen apabila animasi selesai 25%, selesai 50% dan animasi selesai 100%:

contoh

/* 动画代码 */
@keyframes example {
  0%   {warna latar belakang: merah;}
  25%  {warna latar belakang: kuning;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Coba Sendiri

以下例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改背景颜色和 <div> 元素的位置：

contoh

/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Coba Sendiri

延迟动画

animation-delay 属性规定动画开始的延迟时间。

以下例子在开始动画前有 2 秒的延迟：

contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Coba Sendiri

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

在以下例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样：

contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Coba Sendiri

设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。

以下例子在停止前把动画运行 3 次：

contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Coba Sendiri

以下例子使用值 "infinite" 使动画永远持续下去：

contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Coba Sendiri

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction Atribut dapat menerima nilai berikut:

  • normal - 动画正常播放（向前）。默认值
  • reverse - 动画以反方向播放（向后）
  • alternate - 动画先向前播放，然后向后
  • alternate-reverse - 动画先向后播放，然后向前

下例将以相反的方向（向后）运行动画：

contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Coba Sendiri

以下例子使用值 "alternate" 使动画先向前运行，然后向后运行：

contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Coba Sendiri

以下例子使用值 "alternate-reverse" 使动画先向后运行，然后向前运行：

contoh

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Coba Sendiri

Tentukan kurva kecepatan animasi

animation-timing-function Atribut menentukan kurva kecepatan animasi.

animation-timing-function Atribut dapat menerima nilai berikut:

  • ease - Tentukan animasi yang dimulai dengan lambat, kemudian mempercepat, dan kemudian diakhiri dengan lambat (default)
  • linear - Tentukan animasi yang memiliki kecepatan yang sama dari awal hingga akhir
  • ease-in - Tentukan animasi yang dimulai dengan lambat
  • ease-out - Tentukan animasi yang diakhiri dengan lambat
  • ease-in-out - Tentukan animasi yang dimulai dan diakhiri dengan lambat
  • cubic-bezier(n,n,n,n) - Jalankan nilai yang Anda tentukan di tiga fungsi kuadrat besil (cubic-bezier):

Berikut adalah contoh-contoh yang menunjukkan beberapa kurva kecepatan yang dapat digunakan:

contoh

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Coba Sendiri

Tentukan mod pengisi animasi

Animasi CSS tidak akan mempengaruhi elemen sebelum keyframe pertama dimainkan atau setelah keyframe terakhir dimainkan.animation-fill-mode atribut dapat menekan perilaku ini.

Pada saat animasi tidak dimainkan (sebelum mulai, setelah berakhir, atau keduanya berakhir),animation-fill-mode Atribut menentukan gaya elemen target.

Atribut animation-fill-mode dapat menerima nilai berikut:

  • none - Nilai default. Animasi tidak akan menerapkan apa pun ke elemen sebelum atau setelah pelaksanaan.
  • forwards - Elemen akan mempertahankan nilai gaya yang diatur oleh keyframe terakhir (berdasarkan animation-direction dan animation-iteration-count).
  • backwards - Elemen akan mendapatkan nilai gaya yang diatur oleh keyframe pertama (berdasarkan animation-direction) dan mempertahankan nilai ini selama masa terlambat animasi.
  • both - Animasi akan mengikuti aturan sepanjang waktu dan sebaliknya, sehingga memperluas atribut animasi di kedua arah.

Bahan contoh ini membenarkan elemen <div> untuk mempertahankan nilai gaya yang datang dari keyframe terakhir di akhir animasi:

contoh

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Coba Sendiri

di contoh di bawah ini, elemen <div> memperoleh nilai gaya yang ditetapkan oleh keyframe pertama sebelum mulai animasi (dalam masa jeda animasi):

contoh

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Coba Sendiri

di contoh di bawah ini, elemen <div> memperoleh nilai gaya yang ditetapkan oleh keyframe pertama sebelum awal animasi dan mempertahankan nilai gaya terakhir keyframe saat animasi berakhir:

contoh

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Coba Sendiri

Properti Singkatan Animasi

di contoh di bawah ini digunakan enam properti animasi:

contoh

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Coba Sendiri

menggunakan singkatan animation properti juga dapat mencapai efek animasi yang sama seperti contoh di atas:

contoh

div {
  animation: example 5s linear 2s infinite alternate;
}

Coba Sendiri

Properti Animasi CSS

tabel di bawah ini menunjukkan aturan @keyframes dan semua properti animasi CSS:

properti deskripsi
@keyframes menetapkan mode animasi.
animation atur properti singkat untuk semua properti animasi.
animation-delay menetapkan jeda dimulainya animasi.
animation-direction tentukan apakah animasi dimainkan ke depan, ke belakang, atau bergantian.
animation-duration menetapkan masa tempuh untuk setiap periode animasi.
animation-fill-mode menetapkan gaya elemen ketika animasi tidak dimainkan (sebelum dimulai, setelah berakhir, atau keduanya bersamaan).
animation-iteration-count menetapkan kali pemainan animasi.
animation-name menetapkan nama @keyframes animasi.
animation-play-state menentukan apakah animasi berjalan atau berhenti
animation-timing-function menentukan garisan kecepatan animasi