Style animationFillMode 属性

定义和用法

animationFillMode 属性规定动画不播放时（动画结束时，或有“延迟”时）将应用于元素的样式。

అప్రమేయంగా, CSS అనిమేషన్లు మొదటి కీ ఫ్రేమ్ ను ప్లే చేయడానికి ముందు జరుగుతున్న అనిమేషన్ ఎలమెంట్ను ప్రభావితం చేయకూడదు, ఆఖరి కీ ఫ్రేమ్ ముగిసిన తర్వాత ప్రభావం మళ్ళిస్తుంది.animationFillMode గుణం ఈ ప్రవర్తనను అధిగమించవచ్చు.

ఉదాహరణ

<div> ఎలమెంట్ యొక్క animationFillMode గుణాన్ని మార్చండి:

document.getElementById("myDIV").style.animationFillMode = "forwards";

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

సింథెక్సిస్

animationFillMode గుణాన్ని పునఃప్రాప్తి చేయండి:

ఆబ్జెక్ట్.style.animationFillMode

animationFillMode గుణాన్ని సెట్ చేయండి:

ఆబ్జెక్ట్.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

గుణాల విలువ

విలువ వివరణ
నాన్ మూల విలువ. అనిమేషన్ ప్రక్రియను అనువర్తించడానికి ముందు లేదా తర్వాత బాగ్దంతిని ఏ స్టైల్ అనువర్తించబడదు.
ఫోర్వార్డ్స్ అనిమేషన్ ముగిసిన తర్వాత (animation-iteration-count ద్వారా నిర్వచించబడిన సంఖ్య ద్వారా), అనిమేషన్ ముగించిన తర్వాత ఈ గుణాన్ని అనువర్తిస్తుంది.
బాక్వార్డ్స్

animation-delay నిర్వచించిన సమయ కాలంలో, అనిమేషన్ అనువర్తిస్తుంది కీ ఫ్రేమ్ లో నిర్వచించిన గుణాల విలువలను, అనిమేషన్ మొదటి సరికొనను ప్రారంభిస్తుంది.

ఈ విలువలు కీ ఫ్రేమ్ యొక్క విలువలు నుండి (అనిమేషన్ దిశ అనిమాల్ లేదా ఆల్టర్నేట్ ఉన్నప్పుడు) లేదా కీ ఫ్రేమ్ వరకు విలువలు (అనిమేషన్ దిశ రివర్స్ లేదా ఆల్టర్నేట్-రివర్స్ ఉన్నప్పుడు).
బదులు అనిమేషన్ ఫిల్ మోడ్ ను అనుసరించాలి. అంటే, అనిమేషన్ ప్రక్రియను రెండు దిశలలో విస్తరించాలి.
ఇనిషియల్ ఈ గుణాన్ని దాని మూల విలువకు సెట్ చేయండి. చూడండి ఇనిషియల్。
ఇన్హెరిట్ ఈ గుణం ను తన పేర్కట్టు అంశానికి అనుగుణంగా పాటిస్తుంది. చూడండి ఇన్హెరిట్。

సాంకేతిక వివరాలు

మూల విలువ: నాన్
పునఃప్రాప్తి విలువ: స్ట్రింగ్లు ఉంది దీనికి సంబంధించిన అంశం animation-fill-mode 属性。
CSS వెర్షన్: CSS3

బ్రౌజర్ మద్దతు

animationFillMode ఇది CSS3 (1999) లక్షణం.

అన్ని బ్రౌజర్లు పూర్తిగా దానిని మద్దతు చేస్తాయి:

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా IE
క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా IE
మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు 11

సంబంధిత పేజీలు

CSS పరికల్పన హాండ్బుక్కు:animation-fill-mode 属性