CSS انیمیشن

CSS انیمیشن

CSS ਹੈਂਡਲਰ ਐਲੀਮੈਂਟ ਦੇ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਬਿਨਾ ਜੇਵੇਸਕ੍ਰਿਪਟ ਜਾਂ ਫਲੈਸ ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾ!

CSS

ਇਸ ਚਾਪ 'ਚ, ਤੁਸੀਂ ਹੇਠ ਲਿਖੇ ਪ੍ਰਾਪਰਟੀਆਂ ਨੂੰ ਸਿੱਖੋਗੇ:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

ਐਨੀਮੇਸ਼ਨ ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ

ਸਾਰੇ ਸਬੰਧਤ ਨੰਬਰ ਪਹਿਲੀ ਵਾਰ ਇਸ ਪ੍ਰਾਪਰਟੀ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥਾ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਗੁਣ ਚਰੋਮ ਆਈਈ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
@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 ਰੂਲ ਵਿੱਚ ਸਟਾਈਲ ਨਿਰਧਾਰਿਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਐਨੀਮੇਸ਼ਨ ਵਿਸ਼ੇਸ਼ ਸਮੇਂ 'ਤੇ ਮੌਜੂਦਾ ਸਟਾਈਲ ਤੋਂ ਨਵੇਂ ਸਟਾਈਲ ਤੱਕ ਧੀਰੇ ਤੌਰ 'ਤੇ ਬਦਲ ਜਾਵੇਗਾ。

ਜਦੋਂ ਤਕ ਐਨੀਮੇਸ਼ਨ ਕਾਰਗਰ ਹੋਣਾ ਹੈ, ਤਾਂ ਐਨੀਮੇਸ਼ਨ ਕੋਈ ਐਲੀਮੈਂਟ ਨਾਲ ਬਾਂਧਿਆ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ。

ਹੇਠਲੇ ਉਦਾਹਰਣ ਵਿੱਚ, "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> ਇਲੈਕਟ੍ਰੌਨ ਨੂੰ ਮੁਕਾਬਲੇ ਦੇ ਦੇਰੀ ਦੌਰਾਨ ਪਹਿਲੇ ਕੀਮਤੀ ਕੀਮਤੀ ਸ਼ੈਲੀ ਦਾ ਵਰਣਨ ਕਰਦਾ ਹੈ:

ਉਦਾਹਰਣ

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 ਮੁਕਾਬਲੇ ਗੁਣਾਂ ਦੀ ਸੂਚੀ ਦਿੱਤੀ ਗਈ ਹੈ:

ਗੁਣ ਵਰਣਨ
@keyframes ਮੁਕਾਬਲੇ ਮੋਡ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
animation ਸਾਰੇ ਮੁਕਾਬਲੇ ਗੁਣਾਂ ਦੇ ਲਘੂ ਗੁਣ ਨੂੰ ਸੁਚੇਤ ਕਰੋ。
animation-delay ਮੁਕਾਬਲੇ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਦੇਰੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
animation-direction ਮੁਕਾਬਲੇ ਨੂੰ ਅੱਗੇ ਚਲਾਉਣ, ਪਿੱਛੇ ਚਲਾਉਣ ਜਾਂ ਬਦਲ ਬਦਲ ਚਲਾਉਣ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
animation-duration ਮੁਕਾਬਲੇ ਨੂੰ ਇੱਕ ਚੱਕਰ ਪੂਰਾ ਕਰਨ ਲਈ ਲਗਾਉਣ ਵਾਲਾ ਸਮਾਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
animation-fill-mode ਮੁਕਾਬਲੇ ਨੂੰ ਨਾ ਚਲਾਉਣ ਵਾਲੇ ਸਮੇਂ ਵਿੱਚ ਇਲੈਕਟ੍ਰੌਨ ਦੀ ਸ਼ੈਲੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ (ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ, ਸਮਾਪਤ ਹੋਣ ਤੋਂ ਬਾਅਦ ਜਾਂ ਦੋਵੇਂ ਦੋਵੇਂ)。
animation-iteration-count ਮੁਕਾਬਲੇ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਵਾਲੀ ਗਿਣਤੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
animation-name ਸਵਿਕਾਰ @keyframes ਮੁਕਾਬਲੇ ਦਾ ਨਾਮ。
animation-play-state تعیین می‌کند که انیمیشن اجرا شود یا متوقف شود.
animation-timing-function سرعت منحنی انیمیشن را تعیین می‌کند.