شرلوک پس از دسترسی به دیتا‌های دیتا سنتر وزارت دفاع انگلستان، عکس بهم ریخته‌ای را پیدا کرد که احتمال می‌دهد همان موریارتی یعنی فرد بمب‌گذار باشد. شرلوک از شما می‌خواهد که با استفاده از دانش انیمیشن خود این عکس‌های بهم ریخته را مرتب کنید.

ظاهر کلی برنامه به صورت زیر است:

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

ساختار فایل‌ها

Moriarty
├── assets
│   ├── puzzle1.png
│   ├── puzzle2.png
│   ├── puzzle3.png
│   └── puzzle4.png
├── style
│   ├── style.css 
├── template
│   ├── index.html

توضیحات

خواسته مسئله

از شما می‌خواهیم با توجه به توضیحات، مرتب کردن عکس را به کمک انیمیشن در CSS پیاده‌سازی کنید. قطعات پازل باید به واسطه‌ی یک انیمیشن که با Keyframe پیاده‌سازی شده است در کنار یک دیگر قرار بگیرند و تصویر بمب‌گذار را تشکیل دهند.

نکات

1. تنها مجاز به استفاده از Keyframe هستید. استفاده از transition مجاز نیست.
2. پس از پایان انیمیشن قطعات پازل نباید به حالت اولیه بازگردند.
3. شما تنها مجاز به تغییر فایل style.css هستید.
4. برای بارگذاری، فایل style.css را به تنهایی ارسال کنید.