%align_right_start% ### تکنولوژی‌های موردنیاز: ``` CSS ``` شرلوک پس از دسترسی به دیتا‌های دیتا سنتر وزارت دفاع انگلستان، عکس بهم ریخته‌ای را پیدا کرد که احتمال می‌دهد همان موریارتی یعنی فرد بمب‌گذار باشد. شرلوک از شما می‌خواهد که با استفاده از دانش انیمیشن خود این عکس‌های بهم ریخته را مرتب کنید. ظاهر کلی برنامه به صورت زیر است:  # پروژه اولیه پروژه اولیه را از [این لینک](/contest/assignments/68956/download_problem_initial_project/236334/) دانلود کنید. ساختار فایل‌ها ``` Moriarty ├── assets │ ├── puzzle1.png │ ├── puzzle2.png │ ├── puzzle3.png │ └── puzzle4.png ├── style │ ├── <mark title="شما تنها مجاز به تغییر این فایل هستید">style.css</mark> ├── template │ ├── index.html ``` ### توضیحات <details class="blue"> <summary> **تصویر اول** </summary> | ویژگی | زمان | مقدار | | |:----------------------------:|:-----:|:-:|:-:| | مدت زمان انیمییشن | - | ۳ ثانیه | | | | فاصله از بالا | 50% | 30rem | | | | فاصله از چپ | 50% | 30rem | | | | فاصله از بالا | 100% | 0rem | | | | فاصله از چپ | 100% | 2rem | | | </details> <details class="blue"> <summary> **تصویر دوم** </summary> | ویژگی | زمان | مقدار | | |:----------------------------:|:------:|:-:|:-:| | مدت زمان انیمییشن | - | ۳ ثانیه| | | | فاصله از بالا | 50% | 5rem- | | | | فاصله از چپ | 50% | 25rem | | | | فاصله از بالا | 100% | 25.5rem | | | | فاصله از چپ | 100% | 2rem | | | </details> <details class="blue"> <summary> **تصویر سوم** </summary> | ویژگی | زمان | مقدار | | |:----------------------------:|:------:|:-:|:-:| | مدت زمان انیمییشن | - | ۳ ثانیه| | | | فاصله از بالا | 50% | 15rem | | | | فاصله از چپ | 50% | 15rem | | | | فاصله از بالا | 100% | 0rem | | | | فاصله از چپ | 100% | 32rem | | | </details> <details class="blue"> <summary> **تصویر چهارم** </summary> | ویژگی | زمان | مقدار | | |:----------------------------:|:------:|:-:|:-:| | مدت زمان انیمییشن | - | ۳ ثانیه | | | فاصله از بالا | 50% | 17rem | | | | فاصله از چپ | 50% | 15rem | | | | فاصله از بالا | 100% | 30.5rem | | | | فاصله از چپ | 100% | 26.8rem | | | </details> ### خواسته مسئله از شما می‌خواهیم با توجه به توضیحات، مرتب کردن عکس را به کمک انیمیشن در *CSS* پیاده‌سازی کنید. قطعات پازل باید به واسطه‌ی یک انیمیشن که با `Keyframe` پیاده‌سازی شده است در کنار یک دیگر قرار بگیرند و تصویر بمب‌گذار را تشکیل دهند. # نکات 1. تنها مجاز به استفاده از `Keyframe` هستید. استفاده از `transition` مجاز نیست. 2. پس از پایان انیمیشن قطعات پازل **نباید** به حالت اولیه بازگردند. 3. شما تنها مجاز به تغییر فایل `style.css` هستید. 5. برای بارگذاری، فایل style.css را به تنهایی ارسال کنید.

حل سؤال در بانک سؤالات