تصاوير متحرك

انیمیشن راهی عالی برای برجسته کردن عناصر تعاملی و افزودن علاقه و سرگرمی به طرح های شما است. در این ماژول نحوه افزودن و کنترل افکت های انیمیشن با CSS را بیاموزید.

گاهی اوقات کمک‌کننده‌های کوچکی در رابط‌ها می‌بینید که وقتی روی آن‌ها کلیک می‌کنید، اطلاعات مفیدی در مورد بخشی که در آن قرار دارند ارائه می‌دهند. اینها اغلب دارای یک انیمیشن ضربان دار هستند تا به طور ماهرانه به شما اطلاع دهند که اطلاعات موجود است و باید با آنها تعامل کرد. این ماژول به شما نشان می دهد که چگونه با استفاده از CSS آن کمک کننده ها و سایر انیمیشن ها را ایجاد کنید.

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

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

در اکثر ابزارهای انیمیشن، فریم‌های کلیدی مکانیزمی هستند که شما برای تخصیص وضعیت‌های انیمیشن به مُهرهای زمانی در خط زمانی استفاده می‌کنید.

به عنوان مثال، در اینجا یک جدول زمانی برای نقطه "کمک" ضربان دار وجود دارد. انیمیشن به مدت 1 ثانیه و دارای 2 حالت است.

نقطه خاصی وجود دارد که هر یک از این حالت های انیمیشن شروع و پایان می یابد. شما اینها را در جدول زمانی با فریم های کلیدی ترسیم می کنید.

@keyframes

CSS @keyframes بر اساس همان مفهوم فریم های کلیدی انیمیشن است.

در اینجا یک مثال با دو حالت آورده شده است:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

اولین بخش مهم ، شناسه سفارشی ( custom-ident ) ، نام قاعده فریم‌های کلیدی است. شناسه در این مثال my-animation است. شناسه سفارشی مانند یک نام تابع عمل می کند و به شما امکان می دهد به قانون فریم های کلیدی در جای دیگری در کد CSS خود مراجعه کنید.

در قانون فریم‌های کلیدی، from و to کلیدواژه‌هایی هستند که 0% و 100% را نشان می‌دهند که شروع و پایان انیمیشن هستند. شما می توانید همان قانون را به شکل زیر دوباره ایجاد کنید:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

می‌توانید در طول بازه زمانی هر تعداد موقعیت را که دوست دارید اضافه کنید. در مثال کمکی ضربان دار، دو حالت وجود دارد که به دو فریم کلیدی ترجمه می شوند. این بدان معنی است که شما دو موقعیت در داخل قانون فریم های کلیدی خود دارید تا تغییرات هر یک از این فریم های کلیدی را نشان دهید.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

ویژگی های animation

برای استفاده از @keyframes در یک قانون CSS، می‌توانید ویژگی‌های انیمیشن مختلف را به صورت جداگانه تعریف کنید یا از ویژگی کوتاه‌نویسی animation استفاده کنید.

animation-duration

.my-element {
    animation-duration: 10s;
}

ویژگی animation-duration تعیین می‌کند که خط زمانی @keyframes باید به عنوان مقدار زمانی چقدر باشد. به طور پیش‌فرض روی 0 ثانیه تنظیم می‌شود، به این معنی که انیمیشن همچنان اجرا می‌شود، اما دیدن آن برای شما خیلی سریع است. شما نمی توانید از مقادیر زمانی منفی استفاده کنید.

animation-timing-function

برای کمک به بازسازی حرکت طبیعی در انیمیشن، می توانید از توابع زمان بندی استفاده کنید که سرعت انیمیشن را در هر نقطه محاسبه می کند. مقادیر محاسبه‌شده اغلب منحنی هستند و باعث می‌شود انیمیشن در طول animation-duration با سرعت‌های متغیر اجرا شود و اگر مرورگر مقداری فراتر از مقادیر تعریف‌شده در @keyframes محاسبه کند، عنصر به نظر می‌رسد که پرش می‌کند.

کلمات کلیدی متعددی در CSS به‌عنوان پیش‌تنظیم در دسترس هستند که به‌عنوان مقدار برای عملکرد زمان‌بندی انیمیشن استفاده می‌شوند: linear ، ease ، ease-in ، ease-out ، ease-in-out .

.my-element {
    animation-timing-function: ease-in-out;
}

به نظر می‌رسد که مقادیر تابع آسان‌سازی منحنی هستند، زیرا کاهش با استفاده از منحنی بزیه ، نوعی تابع برای مدل‌سازی سرعت، محاسبه می‌شود. هر یک از کلیدواژه‌های تابع زمان‌بندی، مانند ease ، به یک منحنی از پیش تعریف‌شده Bézier اشاره می‌کند. در CSS، می‌توانید منحنی Bézier را مستقیماً با استفاده از تابع cubic-bezier() تعریف کنید که چهار مقدار عددی را می‌پذیرد: x1 ، y1 ، x2 ، y2 .

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

این مقادیر هر قسمت از منحنی را در امتداد محور X و Y رسم می کنند.

درک منحنی های بزیه پیچیده است. ابزارهای بصری، مانند این ژنراتور Lea Verou، بسیار مفید هستند.

عملکرد تسهیل steps

گاهی اوقات ممکن است بخواهید با حرکت در فواصل به جای منحنی، کنترل دقیق تری بر انیمیشن خود داشته باشید. تابع easing steps() به شما امکان می دهد تا جدول زمانی را به بازه های زمانی تعریف شده با مدت زمان مساوی تقسیم کنید.

.my-element {
    animation-timing-function: steps(10, end);
}

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

بحث دوم جهت است. اگر روی end تنظیم شده باشد، که پیش‌فرض است، مراحل در پایان خط زمانی شما به پایان می‌رسد. اگر قرار است start شود، اولین مرحله انیمیشن شما به محض شروع کامل می شود، به این معنی که یک قدم زودتر از end به پایان می رسد.

animation-iteration-count

.my-element {
    animation-iteration-count: 10;
}

ویژگی animation-iteration-count مشخص می کند که خط زمانی @keyframes باید چند بار در طول انیمیشن اجرا شود. به طور پیش فرض، این عدد 1 است، به این معنی که انیمیشن زمانی که به پایان خط زمانی شما می رسد متوقف می شود. این مقدار نمی تواند یک عدد منفی باشد.

برای ایجاد حلقه انیمیشن خود، تعداد تکرار را روی infinite تنظیم کنید. انیمیشن ضربان دار از ابتدای این درس به این صورت است.

animation-direction

.my-element {
    animation-direction: reverse;
}

می‌توانید با animation-direction که مقادیر زیر را دریافت می‌کند، تعیین کنید که تایم لاین در کدام جهت روی فریم‌های کلیدی شما اجرا شود:

• normal : مقدار پیش فرض که به جلو است.
• reverse : روی جدول زمانی شما به سمت عقب اجرا می شود.
• alternate : برای هر تکرار انیمیشن، جدول زمانی بین دویدن به جلو و دویدن به عقب تغییر می کند.
• alternate-reverse : مانند alternate ، اما انیمیشن با خط زمانی شروع می شود که به عقب می رود.

animation-delay

.my-element {
    animation-delay: 5s;
}

ویژگی animation-delay مشخص می کند که مرورگر چه مدت قبل از شروع انیمیشن منتظر می ماند. مانند ویژگی animation-duration ، این یک مقدار زمانی می گیرد.

برخلاف animation-duration ، می توانید animation-delay را به عنوان یک مقدار منفی تعریف کنید، که باعث می شود انیمیشن از نقطه مربوطه در جدول زمانی شما شروع شود. به عنوان مثال، اگر انیمیشن شما 10 ثانیه است و animation-delay را روی -5s تنظیم کرده اید، انیمیشن از نیمه راه تایم لاین شما شروع می شود.

animation-play-state

.my-element:hover {
    animation-play-state: paused;
}

ویژگی animation-play-state به شما امکان پخش و توقف انیمیشن را می دهد. مقدار پیش فرض running است. اگر آن را روی paused تنظیم کنید، انیمیشن مکث می‌کند.

animation-fill-mode

ویژگی animation-fill-mode مشخص می کند که کدام مقادیر در جدول زمانی @keyframes شما قبل از شروع یا پس از پایان انیمیشن باقی می مانند. مقدار پیش‌فرض none است، به این معنی که وقتی انیمیشن کامل شد، مقادیر موجود در جدول زمانی شما کنار گذاشته می‌شوند. گزینه های دیگر عبارتند از:

• forwards : آخرین فریم کلیدی بر اساس جهت انیمیشن باقی می ماند.
• backwards : اولین فریم کلیدی بر اساس جهت انیمیشن ادامه می یابد.
• both : هر دو فریم کلیدی اول و آخر باقی می مانند.

خلاصه نویسی animation

به جای اینکه هر ویژگی را به طور جداگانه تعریف کنید، می توانید آنها را به صورت مختصر animation تعریف کنید، که به شما امکان می دهد ویژگی های انیمیشن را به ترتیب زیر تعریف کنید:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

ملاحظات در هنگام کار با انیمیشن

کاربران می توانند سیستم عامل خود را طوری تنظیم کنند که هنگام تعامل با برنامه ها و وب سایت ها ، حرکت کاهش یافته را ترجیح دهد . می‌توانید این اولویت را با استفاده از عبارت prefers-reduced-motion media شناسایی کنید:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

این لزوماً ترجیحی برای بدون انیمیشن نیست. این ترجیح برای انیمیشن کمتر، به خصوص انیمیشن کمتر غیرمنتظره است. می توانید در راهنمای انیمیشن ما درباره این اولویت و عملکرد کلی بیشتر بیاموزید.

درک خود را بررسی کنید

دانش خود را از انیمیشن ها تست کنید