CSS تبدیلات

CSS تبدیلات

CSS 过渡允许您在给定的时间内平滑地改变属性值。

请把鼠标移动到这个元素上，来查看 CSS 过渡效果：

CSS

在本章中，您将学习如下属性：

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

对过渡的浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

ਗੁਣ ਚਰਮ IE ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

CSS ਟਰਾਂਸੀਸ਼ਨ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ?

ਜੇਕਰ ਤੁਸੀਂ ਟਰਾਂਸੀਸ਼ਨ ਪ੍ਰਭਾਵ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਕੇਵਲ ਦੋ ਚੀਜ਼ਾਂ ਨੂੰ ਸਪਸ਼ਟ ਕਰਨਾ ਹੋਵੇਗਾ:

  • ਤੁਸੀਂ ਕਿਸ ਸੀਐੱਸਐੱਸ ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਪ੍ਰਭਾਵ ਪ੍ਰਦਾਨ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ
  • ਪ੍ਰਭਾਵ ਦੀ ਮਿਆਦ

ਧਿਆਨ:ਜੇਕਰ ਮਿਆਦ ਦਾ ਅੰਗ ਨਾ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਤਾਂ ਟਰਾਂਸੀਸ਼ਨ ਪ੍ਰਭਾਵ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ, ਕਿਉਂਕਿ ਮੂਲ ਮੁੱਲ 0 ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ 100px * 100px ਦਾ ਲਾਲ ਰੰਗ ਵਾਲਾ <div> ਅਲਾਕਾ ਦਿਸਾਉਂਦਾ ਹੈ. <div> ਅਲਾਕਾ ਵੀ width ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਟਰਾਂਸੀਸ਼ਨ ਪ੍ਰਭਾਵ ਨਾਲ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ, ਜਿਸ ਦੀ ਮਿਆਦ 2 ਸੈਕੰਡ ਹੈ:

ਉਦਾਹਰਣ

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

ਜਦੋਂ ਨਿਰਧਾਰਿਤ ਸੀਐੱਸਐੱਸ ਪ੍ਰਤੀਯੋਗਿਤਾ (width) ਦਾ ਮੁੱਲ ਬਦਲ ਜਾਵੇਗਾ, ਤਾਂ ਟਰਾਂਸੀਸ਼ਨ ਪ੍ਰਭਾਵ ਸ਼ੁਰੂ ਹੋ ਜਾਵੇਗਾ。

ਹੁਣ, ਅਸੀਂ width ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ <div> ਅਲਾਕੇ ਉੱਤੇ ਮਾਉਸ ਲੱਗਣ ਉੱਤੇ ਨਵਾਂ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰੀਏ:

ਉਦਾਹਰਣ

div:hover {
  width: 300px;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਕਿਰਪਾ ਕਰਕੇ, ਜਦੋਂ ਕਾਰਕੁੰਨ ਅਲਾਕੇ ਤੋਂ ਹਟਦਾ ਹੈ, ਉਹ ਕ੍ਰਮਵਾਰ ਆਪਣੇ ਮੂਲ ਸਟਾਈਲ ਵਾਪਸ ਆ ਜਾਵੇਗਾ。

ਕਈ ਗੁਣਾਂ ਦੇ ਮੁੱਲ ਨੂੰ ਬਦਲੋ

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ width ਅਤੇ height ਗੁਣਾਂ ਨੂੰ ਸਾਰੇ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ ਦਿੱਤਾ ਗਿਆ ਹੈ, width 2 ਸਕਿੰਟ, height 4 ਸਕਿੰਟ ਹਨ:

ਉਦਾਹਰਣ

div {
  transition: width 2s, height 4s;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਟਰਾਂਸ਼ਿਫ਼ਨ ਗਤੀ ਕੰਕਲੇ ਦੀ ਸੁਨੀਸ਼ਚਿਤਕਰਨ

transition-timing-function ਗੁਣ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ ਦੀ ਗਤੀ ਕੰਕਲੇ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

transition-timing-function ਗੁਣ ਨੂੰ ਹੇਠ ਦੇ ਮੁੱਲ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ:

  • ease - ਸ਼ੁਰੂ ਵਿੱਚ ਧੀਰ ਗਤੀ, ਫਿਰ ਤੇਜ਼ ਹੋ ਜਾਣ ਅਤੇ ਫਿਰ ਧੀਰ ਹੋ ਜਾਣ ਵਾਲੇ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ (ਮੂਲ ਰੂਪ).
  • linear - ਸ਼ੁਰੂ ਤੋਂ ਸਮਾਪਤ ਤੱਕ ਸਮਾਨ ਗਤੀ ਵਾਲੇ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ
  • ease-in - ਸ਼ੁਰੂ ਵਿੱਚ ਧੀਰ ਗਤੀ ਵਾਲੇ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ
  • ease-out - ਸਮਾਪਤ ਵਿੱਚ ਧੀਰ ਗਤੀ ਵਾਲੇ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ
  • ease-in-out - ਸ਼ੁਰੂ ਅਤੇ ਸਮਾਪਤ ਵਿੱਚ ਅਲੱਗ-ਅਲੱਗ ਗਤੀ ਵਾਲੇ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ
  • cubic-bezier(n,n,n,n) - ਤੁਹਾਨੂੰ ਤਿੰਨ ਬੇਸਿਲ ਬੀਜਰ ਫੰਕਸ਼ਨ ਵਿੱਚ ਆਪਣੇ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਣ ਵਾਲੇ ਵੱਖ-ਵੱਖ ਗਤੀ ਕੰਕਲੇ ਦਿਸਾਈ ਗਏ ਹਨ:

ਉਦਾਹਰਣ

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਦੇਰੀ ਵਾਲੇ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ

transition-delay ਗੁਣ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ ਦੀ ਦੇਰੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ (ਸਕਿੰਟ ਵਿੱਚ).

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ 1 ਸਕਿੰਟ ਦੀ ਦੇਰੀ ਨਾਲ ਹੈ:

ਉਦਾਹਰਣ

div {
  transition-delay: 1s;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਟਰਾਂਸਫ਼ਰਮ + ਟਰਾਂਸ਼ਿਫ਼ਨ

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਟਰਾਂਸਫ਼ਰਮ ਨੂੰ ਟਰਾਂਸ਼ਿਫ਼ਨ ਪ੍ਰਭਾਵ ਦੇ ਸਮੇਤ ਦਿੱਤਾ ਹੈ:

ਉਦਾਹਰਣ

div {
  transition: width 2s, height 2s, transform 2s;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਹੋਰ ਟਰਾਂਸ਼ਿਫ਼ਨ ਉਦਾਹਰਣ

ਤੁਸੀਂ CSS ਟਰਾਂਸ਼ਿਫ਼ਨ ਗੁਣਾਂ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਵਿਸਤਾਰ ਨਾਲ ਸੁਨੀਸ਼ਚਿਤ ਕਰ ਸਕਦੇ ਹੋ ਕਿ:

ਉਦਾਹਰਣ

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਜਾਂ ਸਰਲ ਲਿਖਤ ਦੀ ਵਰਤੋਂ ਕਰੋ transition ਗੁਣ:

ਉਦਾਹਰਣ

div {
  transition: width 2s linear 1s;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਟਰਾਂਸ਼ਿਫ਼ਨ ਗੁਣ

ਹੇਠ ਸਾਰੇ CSS ਟਰਾਂਸ਼ਿਫ਼ਨ ਗੁਣਾਂ ਦੀ ਸੂਚੀ ਦਿੱਤੀ ਗਈ ਹੈ:

ਗੁਣ ਵਰਣਨ
transition چار过渡 حصوں کو ایک واحد حصے میں رکھنے کے لئے استعمال کئے جانے والا مختصر حصہ
transition-delay 过渡 اثر کی تاخیر کو معین کرنا، سیکنڈ میں
transition-duration 过渡 اثر کی مدت کو معین کرنا، سیکنڈ یا میلسی ثانیوں میں
transition-property 过渡 اثر کا متعلقہ CSS کا حصہ کا نام معین کرنا
transition-timing-function 过渡 اثر کی رفتار منحنی کو معین کرنا