6.0 KiB
6.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78a7367417b2b2512adf | Learn How the CSS @keyframes and animation Properties Work | 0 | تعلم كيف تعمل CSSkeyframes وخصائص الرسوم المتحركة |
Description
@keyframes
. تتحكم خصائص الرسم المتحرك في الكيفية التي ينبغي أن يتصرف بها @keyframes
القاعدة @keyframes
بما يحدث أثناء ذلك الرسم المتحرك. هناك ثمانية خصائص للرسوم المتحركة في المجموع. وهذا التحدي يبقيه بسيطة وتغطية اثنين من أهمها أولا: animation-name
يحدد اسم للرسوم المتحركة، والذي يستخدم لاحقا من قبل @keyframes
أن أقول CSS التي تسيطر على الذهاب مع والرسوم المتحركة. تحدد animation-duration
الوقت للرسوم المتحركة. @keyframes
هو كيفية تحديد ما يحدث بالضبط داخل الرسوم المتحركة على مدار المدة. يتم ذلك عن طريق إعطاء خصائص CSS "إطارات" محددة أثناء الرسوم المتحركة ، مع نسب تتراوح من 0٪ إلى 100٪. إذا قارنت هذا بفيلم ، فإن خصائص CSS لـ 0٪ هي كيفية عرض العنصر في المشهد الافتتاحي. تتمثل خصائص CSS بنسبة 100٪ في كيفية ظهور العنصر في النهاية قبل بدء القوائم مباشرةً. بعد ذلك ، يقوم CSS بتطبيق السحر على نقل العنصر خلال المدة المحددة للعمل على المشهد. في ما يلي مثال لتوضيح استخدام @keyframes
وخصائص الرسم المتحرك: #anim {للعنصر مع
اسم الرسوم المتحركة: ملونة.
مدة الرسوم المتحركة: 3 ثوانٍ ؛
}
keyframes الملونة {
0٪
لون الخلفية: أزرق ؛
}
100٪ {
لون الخلفية: أصفر.
}
}
anim
الهوية، ورمز المقتطف أعلاه يحدد animation-name
إلى colorful
ويحدد animation-duration
إلى 3 ثوان. ثم @keyframes
القاعدة @keyframes
بخصائص الرسم المتحرك بالاسم colorful
. يضبط اللون على اللون الأزرق في بداية الرسم المتحرك (0٪) والذي سينتقل إلى اللون الأصفر بنهاية الصورة المتحركة (100٪). أنت لا تقتصر على الانتقالات في نهاية البداية فقط ، يمكنك تعيين خصائص للعنصر لأي نسبة تتراوح بين 0٪ و 100٪. Instructions
rect
للعنصر الذي يحتوي على rect
id ، من خلال تعيين animation-name
على قوس قزح animation-duration
إلى 4 ثوانٍ. بعد ذلك ، قم بالإعلان عن قاعدة @keyframes
، وقم بتعيين background-color
في بداية الرسم المتحرك ( 0%
) إلى اللون الأزرق ، وسط الرسم المتحرك ( 50%
) إلى اللون الأخضر ، ونهاية الحركة ( 100%
) إلى الأصفر. Tests
tests:
- text: يجب أن يكون للعنصر ذو معرف <code>rect</code> خاصية <code>animation-name</code> ذات قيمة قوس قزح.
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");'
- text: يجب أن يكون للعنصر ذي معرف <code>rect</code> خاصية <code>animation-duration</code> ذات قيمة 4 أضعاف.
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");'
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> <code>animation-name</code> لقوس قزح.
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");'
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> لقوس قزح <code>background-color</code> أزرق عند 0٪.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");'
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> لقوس قزح <code>background-color</code> خضراء بنسبة 50٪.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");'
- text: يجب أن تستخدم قاعدة <code>@keyframes</code> لقوس قزح <code>background-color</code> أصفر بنسبة 100٪.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");'
Challenge Seed
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
}
</style>
<div id="rect"></div>
Solution
// solution required