روشی جدید برای نوشتن ویژگی های تبدیل در CSS 🙌

چند روز پیش، گوگل رویداد سالانه خود را برای معرفی آخرین به‌روزرسانی‌های محصولات خود، Google I/O 23 برگزار کرد. چیزهای جالب زیادی اعلام شد، اما یکی از موارد مورد علاقه من ویژگی تبدیل فردی در CSS بود.

ملک تبدیل فردی چیست؟

در CSS می توانید با افزودن تبدیل به کامپوننت خود حرکت اضافه کنید. مانند ترجمه، چرخش، اسکال کردن و غیره.

div{
  height: 60px;
  width: 60px;
  background-color: green;
  transform: translate(50%, 70%) rotate(30deg) scale(1.2);
}

اما با خصوصیت تبدیل فردی، می توانید ویژگی های تبدیل را به صورت جداگانه مشخص کنید، مانند این:

div{
  height: 60px;
  width: 60px;
  background-color: green;
  translate: 50% 70%;
  rotate: 30deg;
  scale: 1.2
}

این ویژگی تبدیل فردی زمانی که در حال نوشتن یک فریم کلیدی پیچیده، مانند ساخت انیمیشن هستید، مفید خواهد بود. به عنوان مثال، شما می خواهید انیمیشنی بسازید که 0% و 100% ترجمه شود و عنصر را از 25% به 85% بچرخانید. در گذشته، شما باید به صورت دستی مقدار آن 2 تبدیل را در نقاط مختلف فریم کلیدی محاسبه کنید.
کد به شکل زیر خواهد بود:

div{
  height: 60px;
  width: 60px;
  background-color: green;
  animation: anima 5s linear 2s infinite;
}

@keyframes anima{
  0%{ transform: translateX(0);}
  10%{ transform: translateX(10%) rotate(72deg);}
  25%{ transform: translateX(25%) rotate(90deg);}
  85%{ transform: translateX(85%) rotate(180deg);}
  95%{ transform: translateX(90%) rotate(240deg);}
  100%{ transform: translateX(100%) rotate(360deg);}
}

اما با ویژگی انتقال فردی، نیازی به محاسبه در بین نقاط ندارید. فقط کافی است مقادیری را برای دارایی فردی بنویسید.

div{
  height: 60px;
  width: 60px;
  background-color: green;
  animation: anima 5s linear 2s infinite;
}

@keyframes anima{
  0% {rotate: 0;}
  25%, 85% {rotate: 180deg;}
  100% { rotate: 360deg;}

  0% {translate: 0 0;}
  100% { translate: 100% 0;}
}

همانطور که می بینید، اگر می خواهید تحول بیشتری اضافه کنید، خواندن و مدیریت کد بسیار آسان تر است. اما باید بدانید که ویژگی تبدیل فردی فقط در مرورگر پشتیبانی می شود مانند:

• کروم: نسخه 104 (و بالاتر)
• مایکروسافت اج: نسخه 104 (و بالاتر)
• موزیلا فایرفاکس: نسخه 72 (و بالاتر)
• سافاری: نسخه 14.1 (و بالاتر)

اگرچه در حال حاضر فقط در آخرین نسخه مرورگرهای محبوب پشتیبانی می شود، اما یک پیشرفت هیجان انگیز است که بدون شک روند طراحی وب را ساده می کند.

کدنویسی مبارک، و خلاق بمانید