CSS @starting-style ਪ੍ਰਤੀਯੋਗਿਤਾ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

CSS @starting-style ਰੂਲ ਬਰਾਊਜ਼ਰ ਦੇ ਪਹਿਲੇ ਸਟਾਈਲ ਅੱਪਡੇਟ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਤੱਤ ਦੇ ਪ੍ਰਾਰੰਭਿਕ ਸਟਾਈਲ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਇਹ ਪੋਪਅਪ, ਮੋਡਲ ਫੈਨਸ ਜਾਂ ਕਿਸੇ ਵੀ display: none ਸਟੇਟ ਤੋਂ ਦਿਸਕੇ ਵਾਲੇ ਤੱਤ ਲਈ ਸਮੁੱਚੇ ਵਿਚਕਾਰ ਢੰਗ ਨਾਲ ਦਾਖਲ ਅਤੇ ਬਾਹਰ ਕਰਨ ਦੇ ਪਰਿਵਰਤਨ ਦਾ ਪ੍ਰਭਾਵ ਦੇਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਵਰਤੋਂ @starting-styleਬਕਸ ਨੂੰ ਪਾਰਦਰਸ਼ਤਾ 0 ਨਾਲ ਸ਼ੁਰੂ ਕਰੋ ਅਤੇ ਉੱਪਰ ਤੋਂ ਨਿਕਲਣਾ ਸ਼ੁਰੂ ਕਰੋ:

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

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

ਉਦਾਹਰਣ 2

ਪੋਪਅਪ ਅਤੇ ਡਾਲਗ ਵਿੱਚ ਵਰਤੋਂ @starting-style:

#myPopover {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

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

CSS ਗਰੰਥ

@starting-style {
  css ਨਿਰਦੇਸ਼;
}

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਪਲੋਟ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਨੰਬਰ ਪਹਿਲੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਵਰਜਨ ਦਿਸਦੇ ਹਨ。