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-