CSS انیمیشن
- پچھلے پیج CSS تبدیلیاں
- آئندہ پیج CSS توجیہ
CSS انیمیشن
CSS 可实现 HTML 元素的动画效果,而不使用 JavaScript 或 Flash!
在本章中,您将学习如下属性:
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
对动画的浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
属性 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
@keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
什么是 CSS 动画?
动画使元素逐渐从一种样式变为另一种样式。
您可以随意更改任意数量的 CSS 属性。
ਕੀ ਕਰਨਾ ਹੈ ਤਾਂ ਕੀਵਾਰਡ "@keyframes" ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ ਕੇ ਤੁਸੀਂ ਕੀਵਾਰਡ ਵਿੱਚ ਕੀਵਾਰਡ ਵਿੱਚ ਕੀਵਾਰਡ ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ ਕੇ ਕੀਵਾਰਡ ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ:
ਕੀਵਾਰਡ ਨਾਲ ਪੂਰੇ ਸਮੇਂ ਵਿੱਚ ਐਲੀਮੈਂਟ ਦਾ ਸਟਾਇਲ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ.
@keyframes ਰੂਲ
ਜੇਕਰ ਤੁਸੀਂ @keyframes
ਸਟਾਇਲ ਨੂੰ ਨਿਰਦੇਸ਼ਿਤ ਕਰਨ ਵਾਲੇ ਰੂਲਾਂ ਵਿੱਚ, ਆਨੀਮੇਸ਼ਨ ਨਿਸ਼ਚਿਤ ਸਮੇਂ ਵਿੱਚ ਮੌਜੂਦਾ ਸਟਾਇਲ ਤੋਂ ਨਵੇਂ ਸਟਾਇਲ ਵਿੱਚ ਕਿਫਾਇਤੀ ਹੋਵੇਗਾ.
ਆਨੀਮੇਸ਼ਨ ਨੂੰ ਕਾਰਜਸ਼ੀਲ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਆਨੀਮੇਸ਼ਨ ਨੂੰ ਕਿਸੇ ਐਲੀਮੈਂਟ ਨਾਲ ਬਾਂਧਣਾ ਹੋਵੇਗਾ.
ਹੇਠਲੇ ਉਦਾਹਰਣ ਵਿੱਚ "example" ਆਨੀਮੇਸ਼ਨ ਨੂੰ <div> ਐਲੀਮੈਂਟ ਨਾਲ ਬਾਂਧਿਆ ਗਿਆ ਹੈ। ਆਨੀਮੇਸ਼ਨ 4 ਸੈਕੰਡ ਲਈ ਚਲੇਗਾ, ਅਤੇ <div> ਐਲੀਮੈਂਟ ਦਾ ਬੈਕਗਰਾਊਂਡ ਕਲਰ "red" ਤੋਂ ਸੁਗਮਤਾਪੂਰਵਕ "yellow" ਵਿੱਚ ਬਦਲੇਗਾ:
实例
/* ਏਨੀਮੇਸ਼ਨ ਕੋਡ */ @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% ਹੋਵੇ ਤਾਂ <div> ਐਲੀਮੈਂਟ ਦਾ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਬਦਲਦਾ ਹੈ:
实例
/* ਏਨੀਮੇਸ਼ਨ ਕੋਡ */ @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } /* ਏਨੀਮੇਸ਼ਨ ਦਾ ਐਲੀਮੈਂਟ ਲਾਗੂ ਕਰੋ */ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; }
ਹੇਠਲੇ ਉਦਾਹਰਣ ਵਿੱਚ ਏਨੀਮੇਸ਼ਨ 25%,50% ਅਤੇ ਏਨੀਮੇਸ਼ਨ 100% ਪੂਰੇ ਹੋਣ ਉੱਤੇ ਪਠ ਰੰਗ ਅਤੇ <div> ਐਲੀਮੈਂਟ ਦੀ ਸਥਿਤੀ ਬਦਲੇਗਾ:
实例
/* ਏਨੀਮੇਸ਼ਨ ਕੋਡ */ @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 { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: backwards; }
下面的例子在动画开始之前使
实例
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 动画属性:
属性 | 描述 |
---|---|
@keyframes | 规定动画模式。 |
animation | 设置所有动画属性的简写属性。 |
animation-delay | 规定动画开始的延迟。 |
animation-direction | 定动画是向前播放、向后播放还是交替播放。 |
animation-duration | ਐਨੀਮੇਸ਼ਨ ਇੱਕ ਚੱਕਰ ਪੂਰਾ ਕਰਨ ਲਈ ਲਗਾਉਣ ਵਾਲਾ ਸਮਾਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。 |
animation-fill-mode | ਐਨੀਮੇਸ਼ਨ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਨਾ ਹੋਣ ਵਾਲੇ ਅੰਗਾਰਕ ਦੇ ਸਟਾਈਲ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ (ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ, ਸਮਾਪਤ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਜਾਂ ਦੋਵੇਂ ਦੋਵੇਂ ਸਮੇਂ) |
animation-iteration-count | ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਵਾਲੀ ਸ਼ਾਂਤੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。 |
animation-name | ਨਿਯਮਿਤ @keyframes ਐਨੀਮੇਸ਼ਨ ਦੇ ਨਾਮ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。 |
animation-play-state | اینیمیشن کا چلنا یا رکنا مقرر کرتا ہے。 |
animation-timing-function | اینیمیشن کی رفتار کا نمبر مقرر کرتا ہے。 |
- پچھلے پیج CSS تبدیلیاں
- آئندہ پیج CSS توجیہ