动画 CSS

动画 CSS

CSS dapat menciptakan efek animasi elemen HTML tanpa menggunakan JavaScript atau Flash!

CSS

Dalam bab ini, Anda akan belajar tentang properti berikut:

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

Dukungan browser untuk animasi

Angka di tabel menunjukkan versi browser pertama yang mendukung properti ini penuh.

atribut 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

Apa itu animasi CSS?

Animasi membuat elemen berubah gaya secara perlahan dari satu gaya ke yang lain.

Anda dapat merubah berbagai properti CSS dengan bebas.

Untuk menggunakan animasi CSS, Anda harus pertama-tama menentukan beberapa keyframe untuk animasi.

Keyframe mengandung gaya elemen pada waktu tertentu.

@keyframes aturan

Jika Anda di @keyframes Aturan menentukan gaya CSS yang akan berubah secara perlahan dari gaya saat ini ke gaya baru di waktu yang ditentukan.

Untuk membuat animasi berlaku, Anda harus mengikat animasi ke suatu elemen.

Contoh di bawah ini akan mengikat animasi "example" ke elemen <div>. Animasi akan berlangsung selama 4 detik, sambil mengubah warna latar belakang elemen <div> dari "red" hingga "yellow":

contoh

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Aplikasikan efek animasi ke elemen ini */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Coba Sendiri

Perhatian:animation-duration Properti menentukan berapa lama waktu yang dibutuhkan untuk menyelesaikan animasi. Jika tidak disebutkan animation-duration Jika tidak ada properti, animasi tidak akan terjadi karena nilai default adalah 0s (0 detik).

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

Anda juga dapat menggunakan nilai persen. Dengan menggunakan persen, Anda dapat menambahkan berbagai perubahan gaya sesuai dengan kebutuhan.

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

contoh

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  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 属性規定動畫的速度曲線。

  • 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-duration: 4s;
  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-duration: 4s;
  animation-iteration-count: 2;
}

Coba Sendiri

animation-direction: alternate-reverse;

animation-timing-function 指定動畫的速度曲線

animation-timing-function 属性規定動畫的速度曲線。

  • 属性可接受以下值： ease
  • - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） linear
  • - 规定从开始到结束的速度相同的动画 ease-in
  • - 规定慢速开始的动画 ease-out
  • - 规定慢速结束的动画 ease-in-out
  • - 指定开始和结束较慢的动画n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

以下這些例子展示了可以使用的一些不同速度曲線：

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

指定動畫的填充模式

CSS 動畫不會在第一個關鍵幀播放之前或在最後一個關鍵幀播放之後影響元素。animation-fill-mode 屬性能夠覆蓋這種行為。

在不播放動畫時（在開始之前，結束之後，或兩者都結束時），animation-fill-mode 屬性規定目標元素的樣式。

animation-fill-mode 屬性可接受以下值：

  • none - 默認值。動畫在執行之前或之後不會對元素應用任何樣式。
  • forwards - 元素將保留由最後一個關鍵幀設置的樣式值（依賴 animation-direction 和 animation-iteration-count）。
  • backwards - 元素將獲取由第一個關鍵幀設置的樣式值（取決於 animation-direction），並在動畫延遲期間保留該值。
  • both - 動畫將同時遵循向前和向後的規則，從而在兩個方向上擴展動畫屬性。

以下例子讓 <div> 元素在動畫結束時保留來自最後一個關鍵幀的樣式值：

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 taruhan 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 mulai animasi, serta mempertahankan nilai gaya terakhir saat animasi selesai:

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

Atribut Singkat Animasi

di contoh di bawah ini digunakan enam atribut 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 atribut juga dapat mencapai efek animasi yang sama seperti contoh di atas:

contoh

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

Coba Sendiri

Atribut Animasi CSS

tabel di bawah ini menampilkan aturan @keyframes dan semua atribut animasi CSS:

atribut deskripsi
@keyframes menetapkan mode animasi.
animation atur atribut singkat untuk semua atribut animasi.
animation-delay menetapkan lama taruhan untuk dimulai animasi.
animation-direction tentukan apakah animasi dimainkan ke depan, ke belakang, atau berulang.
animation-duration menetapkan waktu yang dihabiskan untuk selesai melaksanakan satu周期 animasi.
animation-fill-mode menetapkan gaya elemen saat animasi tidak dimainkan (di awal, di akhir, atau keduanya sekaligus).
animation-iteration-count menetapkan kali animasi seharusnya dimainkan.
animation-name menetapkan nama animasi @keyframes.
animation-play-state 运行 暂停 动画 规定
animation-timing-function 曲线 速度 动画 规定