تصاوير متحرك

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

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

آیکون های ضربان دار یکی از راه های اطمینان از توجه کاربران شما به اطلاعات مهم است.

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

کی فریم چیست؟

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

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

حالت های انیمیشن ضربان دار در بازه زمانی 1 ثانیه
حالت های انیمیشن ضربان دار.

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

همان نمودار قبلی اما این بار با فریم های کلیدی
انیمیشن ضربان دار با فریم های کلیدی.

@keyframes

پشتیبانی مرورگر

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 16.
  • سافاری: 9.

منبع

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;
  }
}
سعی کنید قانون pulse را ویرایش کنید تا ببینید انیمیشن چگونه تغییر می کند.

ویژگی های animation

پشتیبانی مرورگر

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 16.
  • سافاری: 9.

منبع

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

animation-duration

پشتیبانی مرورگر

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 16.
  • سافاری: 9.

منبع

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

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

animation-timing-function

پشتیبانی مرورگر

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 16.
  • سافاری: 9.

منبع

برای کمک به بازسازی حرکت طبیعی در انیمیشن، می توانید از توابع زمان بندی استفاده کنید که سرعت انیمیشن را در هر نقطه محاسبه می کند. مقادیر محاسبه‌شده اغلب منحنی هستند و باعث می‌شود انیمیشن در طول 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

پشتیبانی مرورگر

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 16.
  • سافاری: 9.

منبع

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

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

سعی کنید تعداد تکرار را برای این انیمیشن تغییر دهید.

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

انیمیشن ضربان دار بی نهایت تکرار می شود.

animation-direction

پشتیبانی مرورگر

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 16.
  • سافاری: 9.

منبع

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

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

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

animation-delay

پشتیبانی مرورگر

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 16.
  • سافاری: 9.

منبع

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

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

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

سعی کنید تاخیر انیمیشن را تغییر دهید.

animation-play-state

پشتیبانی مرورگر

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 16.
  • سافاری: 9.

منبع

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

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

مکان نما را روی عنصر متحرک نگه دارید تا انیمیشن متوقف شود.

animation-fill-mode

پشتیبانی مرورگر

  • کروم: 43.
  • لبه: 12.
  • فایرفاکس: 16.
  • سافاری: 9.

منبع

ویژگی 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;
  }
}

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

نمونه ای از انیمیشن کاهش یافته را امتحان کنید.

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

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

آیا نام یا شناسه سفارشی یک @keyframes انیمیشن حساس است؟

بله
🎉
خیر
CSS اجازه نمی دهد 2 انیمیشن یک نام داشته باشند، اما اجازه می دهد SWOOP و swoop با هم وجود داشته باشند.

کلمات کلیدی from و to مانند:

start و end .
دوباره امتحان کنید!
0% و 100%
from همان 0% و to همان 100٪ است.
0 و 1
دوباره امتحان کنید!

animation-timing-function معمولاً به این نام ها نیز شناخته می شود:

زمان بندی پویا
دوباره امتحان کنید!
تاخیر
دوباره امتحان کنید!
تسهیل
🎉

حداقل تعداد فریم های کلیدی مورد نیاز در یک انیمیشن @keyframes چقدر است؟

1
مرورگر وضعیت فعلی عنصر را به عنوان یک فریم کلیدی می گیرد، بنابراین حداقل، 1 فریم کلیدی مورد نیاز است.
2
دوباره امتحان کنید!
3
دوباره امتحان کنید!
4
دوباره امتحان کنید!