CSS انیمیشن

CSS انیمیشن

CSS 可实现 HTML 元素的动画效果,而不使用 JavaScript 或 Flash!

CSS

在本章中,您将学习如下属性:

  • @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 اینیمیشن کی رفتار کا نمبر مقرر کرتا ہے。