CSS @keyframes قوانین

تعریف اور استعمال

@keyframes قوانین کے ذریعے، آپ کو انیمیشن بن سکتا ہے。

انیمیشن بنانے کا اصول یہ ہے کہ ایک سی ایس ایس اسکیم کو آئندہ سی ایس ایس اسکیم میں تبدیل کیا جاتا ہے。

انیمیشن کے دوران، آپ کو کئی بار اس سی ایس ایس کی اسکیم کو تبدیل کر سکتا ہے。

تغییر وارن کا وقت فیصد کے ذریعے مقرر کیا جاسکتا ہے، یا کلمات کلیدی "from" اور "to" کے ذریعے، جو 0% اور 100% سے مساوی ہیں。

0% انیمیشن کی شروعات کا وقت ہے، 100% انیمیشن کی اختتام کا وقت ہے。

تذکرہ:بہترین براؤزر سپورٹ کے لئے، آپ کو ہمیشہ 0% اور 100% سلیکٹر کا تعریف کرنا چاہیے。

تذکرہ:آپ کو انیمیشن کی جگہ پر انیمیشن کی شکل کنٹرول کرنے کے لئے انیمیشن کی اصول استعمال کریں، ساتھ ہی انیمیشن کو سلیکٹر سے جوڑیں。

注意：!important قوانین کے وارن کی جگہ پر منع کیا جاتا ہے (اس صفحے کے آخری مثال کو دیکھئے)。

دوسرین ملاحظات:

CSS3 کی تعلیمات:CSS3 ਐਨੀਮੇਸ਼ਨ

مثال

مثال 1

使 div 元素匀速向下移动：

@keyframes mymove {
  from {top: 0px;}
  to {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 {
  from {top: 0px;}
  50%  {top: 100px !important;} /* 被忽略 */
  to   {top: 200px;}
}

亲自试一试

CSS 语法

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

属性值

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

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

合法的值：

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

浏览器支持

ਚਰਮੋਨਾ IE / ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
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-