CSS అనిమేషన్

ప్రాయోగిక

/* అనిమేషన్ కోడ్ */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

ప్రయోగించండి

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

పైని ఉదాహరణలో, "from" మరియు "to" అనే పదాలను ఉపయోగించడం ద్వారా (ఇవి 0% ప్రారంభం మరియు 100% పూర్తి అని పేర్కొన్నారు), మేము శైలులు ఎప్పుడు మారాలో ఏర్పాటు చేశాము.

మీరు పరిమాణాన్ని కూడా ఉపయోగించవచ్చు. పరిమాణాన్ని ఉపయోగించడం ద్వారా, మీరు అవసరమైన అనేక శైలి మార్పులను జోడించవచ్చు.

ఈ ఉదాహరణలో, 25%, 50% మరియు 100% పూర్తి అయినప్పుడు డివ్ ఎలమెంట్ బ్యాక్గ్రౌండ్ కలర్ మారుతుంది:

ప్రాయోగిక

/* అనిమేషన్ కోడ్ */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  50%  {background-color: blue;}
}
/* అనిమేషన్ అనువర్తించే మెట్రిక్స్ */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

ప్రయోగించండి

100% {background-color: green;}

ప్రాయోగిక

/* అనిమేషన్ కోడ్ */
@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 - ఎలిమెంట్ చివరి కీ ఫ్రేమ్ స్టైల్ విలువను కాపాడుతుంది (animation-direction మరియు animation-iteration-count ఆధారితం).
• backwards - ఎలిమెంట్ మొదటి కీ ఫ్రేమ్ స్టైల్ విలువను పొందుతుంది (animation-direction ఆధారితం) మరియు కథానాకం పాటుపడుతున్న కాలంలో ఆ విలువను కాపాడుతుంది.
• both - కథానాకం ముందుకు మరియు తిరిగి నియమాలను అనుసరిస్తుంది మరియు రెండు దిశలలో కథానాకం స్టైల్ విలువలను విస్తరిస్తుంది.

ఈ ఉదాహరణలు కథానాకంలో ముగించిన కీ ఫ్రేమ్ స్టైల్ విలువను కాపాడి ఉంచేటట్టు <div> ఎలిమెంట్ ని కథానాకం ముగించిన తర్వాత స్టైల్ విలువలను ఉపయోగిస్తాయి:

ప్రాయోగిక

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 అకాడమిక్ బుక్

ప్రాయోజింగర్ లింక్