CSS అనిమేషన్

ఉదాహరణ

/* అనిమేషన్ కోడ్ */
@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;
}

ప్రయత్నించండి

అనిమేషన్ ప్రసారం ప్రారంభం తర్వాత పరిమితిని నిర్ణయించుకుంటుంది

animation-delay ఈ అనునాసికం అనిమేషన్ ప్రసారం ప్రారంభం తర్వాత పరిమితిని నిర్ణయిస్తుంది.

దిగువ ఉదాహరణలో అనిమేషన్ ప్రసారం ప్రారంభమునుండి 2 సెకన్ల తర్వాత ప్రసారం అవుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

నిష్పక్షపాతం విలువలు కూడా అనుమతించబడతాయి. నిష్పక్షపాతం విలువను వాడితే, అనిమేషన్ ప్రసారం ప్రారంభమవుతుంది కానీ ఇది ఇప్పటికే N సెకన్లు ప్రసారం అవుతుంది వంటిది అవుతుంది.

దిగువ ఉదాహరణలో అనిమేషన్ ప్రసారం ప్రారంభమవుతుంది కానీ ఇది ఇప్పటికే 2 సెకన్లు ప్రసారం అవుతుంది వంటిది అవుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

అనిమేషన్ పరిణమించాల్సిన సంఖ్యను అమర్చుకుంటుంది

animation-iteration-count ఈ అనునాసికం అనిమేషన్ పరిణమించాల్సిన సంఖ్యను నిర్ణయిస్తుంది.

దిగువ ఉదాహరణలో అనిమేషన్ ఆగుటకు ముందు 3 సార్లు పరిణమించుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

దిగువ ఉదాహరణలో "infinite" విలువను వాడి అనిమేషన్ ఎప్పటికీ కొనసాగుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

ప్రతికూల లేదా పరివర్తనాత్మకంగా అనిమేషన్ పరిణమించుతుంది

animation-direction ఈ అనునాసికం అనిమేషన్ ముందుకు ప్రసారం అవుతుంది, వెనుకకు ప్రసారం అవుతుంది లేదా పరివర్తనాత్మకంగా ప్రసారం అవుతుంది అని నిర్ణయిస్తుంది.

animation-direction 属性可接受以下值：

• normal - అనిమేషన్ సాధారణ ప్రసారం అవుతుంది (ముందుకు). డిఫాల్ట్ విలువ
• reverse - అనిమేషన్ ప్రతికూల దిశలో (వెనుకకు) ప్రసారం అవుతుంది
• alternate - అనిమేషన్ మొదట ముందుకు ప్రసారం అవుతుంది మరియు తరువాత వెనుకకు ప్రసారం అవుతుంది
• alternate-reverse - అనిమేషన్ మొదట వెనుకకు ప్రసారం అవుతుంది మరియు తరువాత ముందుకు ప్రసారం అవుతుంది

ఈ ఉదాహరణలో అనిమేషన్ ప్రతికూల దిశలో (వెనుకకు) పరిణమించుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

దిగువ ఉదాహరణలో "alternate" విలువను వాడి అనిమేషన్ మొదట ముందుకు పరిణమించి తరువాత వెనుకకు పరిణమించుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

దిగువ ఉదాహరణలో "alternate-reverse" విలువను వాడి అనిమేషన్ మొదట వెనుకకు పరిణమించి తరువాత ముందుకు పరిణమించుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

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

下面这些例子展示了可以使用的一些不同速度曲线：

ఉదాహరణ

#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;}

ప్రయత్నించండి

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

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

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards - అనిమేషన్-డయరెషన్ మరియు అనిమేషన్-ఇటరేషన్-కాంట్ ఆధారంగా అనిమేషన్ లాస్ట్ క్లీషన్ ఫ్రేమ్ స్టైల్ విలువలను కాపాడుతుంది.
• backwards - అనిమేషన్-డయరెషన్ ఆధారంగా మొదటి క్లీషన్ ఫ్రేమ్ స్టైల్ విలువలను అనిమేషన్ డలేషన్ వ్యవధిలో కాపాడుతుంది.
• both - అనిమేషన్ అన్ని దిశలలో సమానంగా పాటిస్తుంది మరియు రెండు దిశలలో అనిమేషన్ అట్రిబ్యూట్స్ విస్తరిస్తుంది.

ఈ ఉదాహరణ డివై ఎలమెంట్ అనిమేషన్ ముగిసిన క్లీషన్ ఫ్రేమ్ నుండి స్టైల్ విలువలను కాపాడుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

ఈ ఉదాహరణలో అనిమేషన్ డిలే కాలంలో అనిమేషన్ ప్రారంభం ముందు <div> ఎలంజంట్ మొదటి కీ ఫ్రేమ్ స్టైల్ విలువను పొందుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

ఈ ఉదాహరణలో అనిమేషన్ ప్రారంభం ముందు <div> ఎలంజంట్ మొదటి కీ ఫ్రేమ్ స్టైల్ విలువను పొందుతుంది, అనిమేషన్ ముగిసిన తర్వాత చివరి కీ ఫ్రేమ్ స్టైల్ విలువను ఉంచుతుంది:

ఉదాహరణ

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

ప్రయత్నించండి

అనిమేషన్ సరళ అట్రిబ్యూట్

ఈ ఉదాహరణలో ఆరు రకాల అనిమేషన్ అట్రిబ్యూట్లను ఉపయోగించబడింది:

ఉదాహరణ

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

ప్రయత్నించండి

సరళ రూపంలో ఉపయోగించండి animation అట్రిబ్యూట్స్ కూడా పై ఉదాహరణలో అనిమేషన్ ప్రభావాన్ని సాధించవచ్చు:

ఉదాహరణ

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

ప్రయత్నించండి

CSS అనిమేషన్ అట్రిబ్యూట్స్

ఈ పట్టిక అనిమేషన్ @keyframes పరికరాలు మరియు అన్ని CSS అనిమేషన్ అట్రిబ్యూట్లను జాబితాభేదం చేస్తుంది:

工具箱

CSS రిఫరెన్స్ మాన్యువల్

CSS ఇన్‌స్టాన్స్

CSS టెస్ట్

CSS 课外书

赞助商链接