إتقان CSS @starting-style: تحديد الحالات الأولية للرسوم المتحركة

في عالم تطوير الويب الديناميكي، تلعب الرسوم المتحركة دورًا حاسمًا في تعزيز تجربة المستخدم، وتوفير التغذية البصرية الراجعة، وتوجيه تفاعل المستخدم. بينما تطورت رسوم CSS المتحركة والانتقالات بشكل كبير، فإن التحكم الدقيق في الحالة الأولية للرسوم المتحركة، خاصة عندما يتم تشغيلها بواسطة تفاعل المستخدم أو تغيير في الحالة، قد مثل تحديات دقيقة في كثير من الأحيان. هنا يأتي دور قاعدة @starting-style، وهي ميزة CSS قوية مصممة لحل هذه المشكلة بأناقة.

فهم التحدي: الإطار الأول للرسوم المتحركة

تقليديًا، عند تطبيق رسوم متحركة أو انتقال على عنصر ما، يتم تحديد حالته الأولية بواسطة الأنماط المحسوبة الحالية للعنصر *في اللحظة التي تبدأ فيها الرسوم المتحركة/الانتقال*. قد يؤدي هذا إلى قفزات بصرية غير متوقعة أو عدم اتساق، خاصة في سيناريوهات مثل:

• التنقل بين الصفحات: عندما يتم تحريك مكون في صفحة جديدة، قد تكون أنماطه الأولية مختلفة عما هو مقصود إذا لم يتم التعامل معها بعناية.
• تشغيل الرسوم المتحركة عند التمرير أو التركيز: قد تومض الأنماط الموجودة في العنصر أو تتغير لفترة وجيزة قبل أن تتولى الرسوم المتحركة بسلاسة.
• الرسوم المتحركة المطبقة عبر JavaScript: إذا أضافت JavaScript فئة بشكل ديناميكي تشغل رسومًا متحركة، فإن حالة العنصر قبل إضافة الفئة مباشرةً تؤثر على بداية الرسوم المتحركة.
• الرسوم المتحركة التي تتضمن display: none أو visibility: hidden: العناصر التي لا يتم عرضها في البداية لا يمكنها المشاركة في الرسوم المتحركة حتى تصبح مرئية، مما يؤدي إلى ظهور مفاجئ بدلاً من دخول سلس.

لنفكر في مثال بسيط: تريد أن يتلاشى عنصر ويظهر ويتزايد حجمه. إذا كان العنصر يحتوي في البداية على opacity: 0 وtransform: scale(0.5)، ثم تم تطبيق رسوم متحركة CSS تستهدف opacity: 1 وtransform: scale(1)، تبدأ الرسوم المتحركة من حالتها الحالية (غير مرئية ومصغرة). يعمل هذا كما هو متوقع. ومع ذلك، ماذا لو كان العنصر يحتوي في البداية على opacity: 1 وtransform: scale(1)، ثم تم تطبيق رسوم متحركة يجب أن تبدأ من opacity: 0 وscale(0.5)؟ بدون @starting-style، ستبدأ الرسوم المتحركة من opacity: 1 وscale(1) الموجودين في العنصر، متجاوزةً بذلك نقطة البداية المقصودة فعليًا.

تقديم @starting-style: الحل

توفر قاعدة @starting-style طريقة تصريحية لتحديد القيم الأولية لرسوم CSS المتحركة والانتقالات التي يتم تطبيقها على عنصر ما عند إدخاله لأول مرة في المستند، أو عندما يدخل حالة جديدة. تسمح لك بتحديد مجموعة من الأنماط التي ستبدأ بها الرسوم المتحركة، بغض النظر عن الأنماط الافتراضية للعنصر في وقت إنشائه أو في بداية الانتقال.

إنها قوية بشكل خاص عند استخدامها بالاقتران مع:

• رسوم @keyframes المتحركة: تحديد الحالة الأولية للرسوم المتحركة التي قد لا تبدأ عند 0% (أو from).
• انتقالات CSS: ضمان انتقال سلس من حالة غير انتقالية إلى بداية الانتقال.

كيف تعمل @starting-style مع @keyframes

عند استخدام @starting-style مع رسوم @keyframes المتحركة، يمكنك تحديد الأنماط التي يجب تطبيقها *قبل* أن يصبح إطار المفتاح الأول للرسوم المتحركة (عادةً إطار المفتاح 0% أو from) ساري المفعول. وهذا مفيد بشكل خاص للرسوم المتحركة التي تحتاج إلى البدء من حالة 'غير مرئية' أو 'مطوية' ولكن قد يتم عرض العنصر بطريقة أخرى باستخدام أنماط مرئية افتراضية.

الصيغة مباشرة:

            
@keyframes fadeAndScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.my-element {
  /* Other styles */
  animation: fadeAndScale 1s ease-out forwards;
}

@starting-style {
  opacity: 0;
  transform: scale(0.5);
}

            

              
                Copy
              
            
          

في هذا المثال، يهدف .my-element إلى التلاشي والتصغير. إذا تم عرضه في البداية باستخدام opacity: 1 وtransform: scale(1)، فإن الرسوم المتحركة التي تبدأ من from { opacity: 1; transform: scale(1); } ستظهر فورية لأنه موجود بالفعل في حالة 'من'. ومع ذلك، باستخدام @starting-style، نخبر المتصفح صراحةً:

• عند بدء هذه الرسوم المتحركة، يجب أن يكون العنصر معدًا بصريًا بـ opacity: 0.
• ويجب أن يكون تحويله scale(0.5).

يضمن هذا أنه حتى لو كانت الحالة الطبيعية للعنصر مختلفة، فإن الرسوم المتحركة تبدأ تسلسلها بشكل صحيح من قيم البداية المحددة. يطبق المتصفح فعليًا قيم @starting-style هذه، ثم يبدأ إطار المفتاح from من تلك القيم، ويستمر إلى إطار المفتاح to. إذا تم ضبط الرسوم المتحركة على forwards، يتم الاحتفاظ بالحالة النهائية لإطار المفتاح to بعد اكتمال الرسوم المتحركة.

كيف تعمل @starting-style مع الانتقالات

عند تطبيق انتقال CSS على عنصر ما، فإنه يتوسط بسلاسة بين أنماط العنصر *قبل* حدوث الانتقال وأنماطه *بعد* حدوث الانتقال. ينشأ التحدي عندما يتم إضافة الحالة التي تشغل الانتقال ديناميكيًا، أو عندما تريد أن يبدأ الانتقال من نقطة محددة ليست هي حالة العنصر الافتراضية المعروضة.

لنفكر في زر يتزايد حجمه عند التمرير. افتراضيًا، سينتقل الانتقال بسلاسة من حالة الزر غير الممرر إلى حالته الممررة.

            
.my-button {
  transition: transform 0.3s ease;
}

.my-button:hover {
  transform: scale(1.1);
}

            

              
                Copy
              
            
          

يعمل هذا بشكل مثالي. يبدأ الانتقال من transform: scale(1) الافتراضي للزر إلى transform: scale(1.1).

الآن، تخيل أنك تريد أن يتحرك الزر *إلى الداخل* بتأثير تكبير، ثم عند التمرير، يتزايد حجمه *أكثر*. إذا ظهر الزر في البداية بحجمه الكامل، فإن انتقال التمرير يكون مباشرًا. ولكن ماذا لو ظهر الزر باستخدام رسوم متحركة لتلاشي وتكبير، وتريد أن يكون تأثير التمرير أيضًا تكبيرًا سلسًا من حالته *الحالية*، وليس حالته الأصلية؟

هنا تصبح @starting-style لا تقدر بثمن. تسمح لك بتحديد الحالة الأولية للانتقال عندما يتم تطبيق هذا الانتقال على عنصر يتم عرضه لأول مرة (على سبيل المثال، عندما يدخل مكون إلى DOM عبر JavaScript أو عند تحميل صفحة).

لنفترض أن لديك عنصرًا يجب أن يتلاشى ويظهر ويتزايد حجمه في العرض، ثم يتزايد حجمه أكثر عند التمرير. يمكنك استخدام رسوم متحركة للدخول ثم انتقال لتأثير التمرير:

            
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animated-card {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 0.5s ease-out forwards;
  transition: transform 0.3s ease;
}

.animated-card:hover {
  transform: scale(1.1);
}

/* Define the starting style for the initial entry animation */
@starting-style {
  opacity: 0;
  transform: scale(0.8);
}

            

              
                Copy
              
            
          

في هذا السيناريو، تضمن قاعدة @starting-style أن يبدأ العنصر عرضه بـ opacity: 0 وtransform: scale(0.8)، متطابقًا مع إطار المفتاح from لرسوم fadeInScale المتحركة. بمجرد اكتمال الرسوم المتحركة واستقرار العنصر عند opacity: 1 وtransform: scale(1)، فإن الانتقال لتأثير التمرير يتوسط بسلاسة من هذه الحالة إلى transform: scale(1.1). تؤثر @starting-style هنا بشكل خاص على التطبيق الأولي للرسوم المتحركة، مما يضمن أنها تبدأ من النقطة البصرية المطلوبة.

الأهم من ذلك، أن @starting-style تنطبق على الانتقالات التي يتم تطبيقها على العناصر التي يتم إدخالها حديثًا في المستند. إذا كان العنصر موجودًا بالفعل وتغيرت أنماطه لتشمل خاصية انتقال، فإن @starting-style لا تؤثر بشكل مباشر على بداية ذلك الانتقال المحدد إلا إذا كان العنصر يتم عرضه حديثًا أيضًا.

دعم المتصفحات والتطبيق

تُعد قاعدة @starting-style إضافة حديثة نسبيًا إلى مواصفات CSS. واعتبارًا من اعتمادها على نطاق واسع:

• يتمتع Chrome وEdge بدعم ممتاز.
• يتمتع Firefox بدعم جيد.
• يقدم Safari أيضًا دعمًا جيدًا.

يُنصح دائمًا بالتحقق من Can I Use للحصول على أحدث معلومات توافق المتصفحات. بالنسبة للمتصفحات التي لا تدعم @starting-style، ستعود الرسوم المتحركة أو الانتقال ببساطة إلى الأنماط المحسوبة الحالية للعنصر في وقت الاستدعاء، مما قد يؤدي إلى السلوك الأقل من المثالي الموصوف سابقًا.

أفضل الممارسات والاستخدام المتقدم

1. الاتساق هو المفتاح

استخدم @starting-style لضمان بدء الرسوم المتحركة والانتقالات بشكل متسق، بغض النظر عن كيفية إدخال العنصر إلى DOM أو ما قد تكون عليه أنماطه المحسوبة الأولية. يعزز هذا تجربة مستخدم أكثر قابلية للتنبؤ وأكثر صقلًا.

2. ترتيب إطارات المفتاح الخاصة بك

بدلاً من إضافة الحالة الأولية (مثل opacity: 0) إلى إطار المفتاح from لكل رسوم متحركة تحتاجها، يمكنك تعريفها مرة واحدة في @starting-style. وهذا يجعل قواعد @keyframes الخاصة بك أنظف وأكثر تركيزًا على التقدم الأساسي للرسوم المتحركة.

3. التعامل مع تغييرات الحالة المعقدة

بالنسبة للمكونات التي تخضع لتغييرات أو رسوم متحركة متعددة، يمكن أن تساعد @starting-style في إدارة المظهر الأولي للعناصر عند إضافتها أو تحديثها. على سبيل المثال، في تطبيق الصفحة الواحدة (SPA) حيث يتم تركيب وإلغاء تركيب المكونات بشكل متكرر، فإن تحديد نمط بدء رسوم متحركة للدخول باستخدام @starting-style يضمن مظهرًا سلسًا.

4. اعتبارات الأداء

في حين أن @starting-style نفسها لا تؤثر بشكل جوهري على الأداء، فإن الرسوم المتحركة والانتقالات التي تتحكم فيها تفعل ذلك. اسعَ دائمًا إلى تحريك الخصائص التي يمكن للمتصفح التعامل معها بكفاءة، مثل transform وopacity. تجنب تحريك خصائص مثل width أو height أو margin إن أمكن، حيث يمكن أن تؤدي هذه إلى إعادة حسابات مكلفة للتخطيط.

5. بدائل للمتصفحات القديمة

لضمان تجربة معقولة للمستخدمين على المتصفحات التي لا تدعم @starting-style، يمكنك توفير أنماط احتياطية. هذه هي الأنماط الأولية الطبيعية للعنصر التي ستبدأ منها الرسوم المتحركة بخلاف ذلك. في كثير من الحالات، قد يكون السلوك الافتراضي بدون @starting-style مقبولًا إذا كانت الرسوم المتحركة بسيطة.

بالنسبة للسيناريوهات الأكثر تعقيدًا، قد تحتاج إلى JavaScript لاكتشاف دعم المتصفح أو تطبيق أنماط أولية محددة. ومع ذلك، فإن الهدف من @starting-style هو تقليل الحاجة إلى مثل هذه التدخلات من JavaScript.

6. الوصول العالمي والتوطين

عند التطوير لجمهور عالمي، يجب أن تكون الرسوم المتحركة شاملة ولا تعتمد على إشارات بصرية خاصة بالبلد. تُعد قاعدة @starting-style ميزة CSS تقنية تعمل بشكل مستقل عن السياق الثقافي. تكمن قيمتها في توفير أساس تقني متسق للرسوم المتحركة التي يمكن بعد ذلك تصميمها وتطبيقها بطرق حساسة ثقافيًا. إن ضمان الرسوم المتحركة السلسة عبر الأجهزة المختلفة وظروف الشبكة هو هدف عالمي لمطوري الويب، وتساهم @starting-style في تحقيق هذا الاتساق.

سيناريو المثال: رسوم متحركة لبطاقة معرض أعمال

دعنا نوضح ذلك بنمط تصميم ويب شائع: شبكة معرض أعمال حيث تتحرك كل بطاقة إلى العرض بتأخير طفيف وتأثير تكبير.

الهدف: يجب أن تتلاشى كل بطاقة وتتزايد حجمها من 0.9 إلى 1، ويجب تطبيق تأخير طفيف على كل بطاقة عند ظهورها في الشبكة.

HTML:

            
<div class="portfolio-grid">
  <div class="portfolio-item">Card 1</div>
  <div class="portfolio-item">Card 2</div>
  <div class="portfolio-item">Card 3</div>
  <div class="portfolio-item">Card 4</div>
</div>

            

              
                Copy
              
            
          

CSS:

            
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.portfolio-item {
  background-color: #f0f0f0;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2em;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  /* Default initial state */
  opacity: 0;
  transform: scale(0.9);

  /* Animation properties */
  animation: fadeInUpScale 0.6s ease-out forwards;
}

/* @keyframes for the animation */
@keyframes fadeInUpScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* @starting-style to define the initial state for the animation */
@starting-style {
  opacity: 0;
  transform: scale(0.9);
}

/* Applying delays to each item using :nth-child */
.portfolio-item:nth-child(1) {
  animation-delay: 0.1s;
}
.portfolio-item:nth-child(2) {
  animation-delay: 0.2s;
}
.portfolio-item:nth-child(3) {
  animation-delay: 0.3s;
}
.portfolio-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* Adjusting keyframes to show the effect */
@keyframes fadeInUpScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

            

              
                Copy
              
            
          

الشرح:

1. تم تعيين عناصر .portfolio-item في البداية إلى opacity: 0 وtransform: scale(0.9). هذه هي حالتها قبل تطبيق الرسوم المتحركة.
2. تحدد @keyframes fadeInUpScale الرسوم المتحركة من 0% (وهي فعليًا حالة البدء لتقدم الرسوم المتحركة) إلى 100%.
3. تعلن قاعدة @starting-style صراحة أنه عند تطبيق الرسوم المتحركة fadeInUpScale، يجب أن تبدأ بـ opacity: 0 وtransform: scale(0.9). وهذا يضمن أنه حتى لو تغيرت الأنماط الافتراضية بطريقة ما، فإن الرسوم المتحركة ستظل تبدأ من هذه النقطة المحددة.
4. يتم تطبيق خاصية animation-delay على كل عنصر فرعي باستخدام محددات :nth-child لتأخير ظهور البطاقات، مما يخلق تسلسلاً جذابًا بصريًا.
5. يضمن الكلمة المفتاحية forwards أن يحتفظ العنصر بالأنماط من آخر إطار مفتاح بعد انتهاء الرسوم المتحركة.

بدون @starting-style، إذا لم يفسر المتصفح بشكل صحيح الأنماط المحسوبة الأولية لـ .portfolio-item كنقطة بداية للرسوم المتحركة، فقد تبدأ الرسوم المتحركة من حالة مختلفة وغير مقصودة. تضمن @starting-style أن تبدأ الرسوم المتحركة تسلسلها بشكل صحيح من القيم المقصودة.

الخلاصة

تُعد قاعدة @starting-style تقدمًا كبيرًا في رسوم CSS المتحركة والانتقالات. إنها تمكّن المطورين من تحقيق تحكم أكثر دقة في الحالات الأولية للعناصر المتحركة، مما يؤدي إلى واجهات مستخدم أكثر سلاسة وأكثر قابلية للتنبؤ وأكثر احترافية. من خلال فهم وتنفيذ @starting-style، يمكنك الارتقاء برسوم الويب المتحركة الخاصة بك من جيدة إلى استثنائية، مما يضمن تجربة متسقة وجذابة لجمهورك العالمي عبر مجموعة واسعة من الأجهزة والمتصفحات. احتضن هذه الأداة القوية لإنشاء تجارب ويب متحركة مذهلة تأسِر المستخدمين حقًا.