CSS @starting-style নিয়ম

সংজ্ঞা ও ব্যবহার

CSS @starting-style এই রুলটি এলিমেন্টটির প্রথম স্টাইল অপদানের আগে এলিমেন্টকে প্রাথমিক স্টাইল নির্ধারণ করতে ব্যবহৃত হয়。

এটা প্রফাইল, মডাল বা কোনও display: none থেকে দেখা যাওয়া যাওয়ার অবস্থায় এলিমেন্টকে সমস্ত সুবিধা দিতে শান্ত প্রবেগের প্রবেগ ও প্রস্থান প্রভাব দিতে পারে。

প্রকল্প

উদাহরণ 1

ব্যবহার করুন @starting-styleবক্সকে ০ হতে স্পষ্টতা করে, এবং শীর্ষ থেকে নামান:

.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 ডিক্লেয়ার;
}

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম সম্পূর্ণরূপে @ রুলটি সমর্থনকারী ব্রাউজার সংস্করণটির জন্য।