Sifat CSS @keyframes atur

Definisi dan penggunaan

Dengan atur @keyframes, Anda dapat membuat animasi.

Prinsip untuk membuat animasi adalah, perubahan bertahap dari satu set CSS ke yang lain.

Dalam proses animasi, Anda dapat berulang kali mengubah这套 CSS 样式.

Atur waktu perubahan melalui persen, atau melalui kata kunci "from" dan "to", yang setara dengan 0% dan 100%.

0% adalah waktu awal animasi, 100% adalah waktu akhir animasi.

Petunjuk:Untuk mendapatkan dukungan paling baik dari peramban, Anda sebaiknya selalu menentukan pemilih 0% dan 100%.

Petunjuk:Gunakan atribut animasi untuk mengawasi penampilan animasi, serta menghubungkan animasi dengan pemilih.

注意：!important atur perhatian di dalam frame yang penting (lihat contoh terakhir di halaman ini).

Lihat juga:

Tutorial CSS3:Animasi CSS3

contoh

contoh 1

使 div 元素匀速向下移动：

@keyframes mymove {
  从 {top: 0px;}
  至 {top: 200px;}
}

亲自试一试

例子 2

在一个动画中添加多个 keyframe 选择器：

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

亲自试一试

例子 3

在一个动画中改变多个 CSS 样式：

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

亲自试一试

例子 4

带有多个 CSS 样式的多个 keyframe 选择器：

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

亲自试一试

例子 5

注意：!important 规则在关键帧中被忽略：

@keyframes myexample {
  从 {top: 0px;}
  50%  {top: 100px !important;} /* 被忽略 */
  至   {top: 200px;}
}

亲自试一试

CSS 语法

@keyframes animationname {keyframes-selector {css-styles;}}

属性值

值 描述
animationname 必需。定义动画的名称。
keyframes-selector

必需。动画时长的百分比。

合法的值：

  • 0-100%
  • 从（与 0% 相同）
  • 至（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。

browser support

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-