انیمیشن راهی عالی برای برجسته کردن عناصر تعاملی و افزودن علاقه و سرگرمی به طرح های شما است. در این ماژول نحوه افزودن و کنترل افکت های انیمیشن با CSS را بیاموزید.
گاهی اوقات کمک‌کننده‌های کوچکی را روی رابط‌ها می‌بینید که وقتی روی آنها کلیک می‌کنید، اطلاعات مفیدی در مورد آن بخش خاص ارائه می‌دهند. اینها اغلب دارای یک انیمیشن ضربان دار هستند تا به طور ماهرانه به شما اطلاع دهند که اطلاعات موجود است و باید با آنها تعامل کرد. چگونه این کار را با CSS انجام می دهید؟
در CSS می‌توانید این نوع انیمیشن را با استفاده از انیمیشن‌های CSS بسازید که به شما امکان می‌دهد یک دنباله انیمیشن را با استفاده از فریم‌های کلیدی تنظیم کنید. انیمیشن ها می توانند ساده، انیمیشن های یک حالته یا حتی توالی های پیچیده و مبتنی بر زمان باشند.
فریم کلیدی چیست؟
در نرم‌افزار انیمیشن، CSS و اکثر ابزارهای دیگری که به شما امکان می‌دهند چیزی را متحرک کنید، فریم‌های کلیدی مکانیزمی هستند که از آن برای تخصیص وضعیت‌های انیمیشن به مهرهای زمانی، در امتداد یک جدول زمانی استفاده می‌کنید.
بیایید از "پالسر" به عنوان زمینه ای برای این کار استفاده کنیم. کل انیمیشن به مدت 1 ثانیه و در 2 حالت اجرا می شود.
نقطه خاصی وجود دارد که هر یک از این حالت های انیمیشن شروع و پایان می یابد. شما اینها را در جدول زمانی با فریم های کلیدی ترسیم می کنید.
@keyframes
اکنون می‌دانید که فریم کلیدی چیست، این دانش باید به شما در درک نحوه عملکرد قانون CSS @keyframes کمک کند. در اینجا یک قانون اساسی با دو حالت وجود دارد.
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
اولین قسمتی که باید به آن توجه کرد، شناسه سفارشی (شناسه سفارشی) است - یا به عبارت انسانی تر، نام قاعده فریم های کلیدی. شناسه این قانون my-animation است. شناسه سفارشی مانند نام تابع عمل می کند. همانطور که در ماژول توابع یاد گرفتید، به شما امکان می‌دهد به قانون فریم‌های کلیدی در جای دیگری در کد CSS خود مراجعه کنید.
در قانون فریم‌های کلیدی، from و to کلمات کلیدی هستند که نشان‌دهنده 0% و 100% هستند که شروع و پایان انیمیشن هستند. شما می توانید همان قانون را به شکل زیر دوباره ایجاد کنید:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
می‌توانید در طول بازه زمانی هر تعداد موقعیت را که دوست دارید اضافه کنید. با استفاده از متن مثال "پالسر"، 2 حالت وجود دارد که به 2 فریم کلیدی ترجمه می شود. این بدان معناست که شما 2 موقعیت در داخل قانون فریم های کلیدی خود دارید تا تغییرات هر یک از این فریم های کلیدی را نشان دهد.
@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;
}
به نظر می‌رسد که مقادیر با توابع کاهش منحنی می‌شوند، زیرا کاهش با استفاده از منحنی bézier محاسبه می‌شود، که برای مدل‌سازی سرعت استفاده می‌شود. هر یک از کلیدواژه‌های تابع زمان‌بندی، مانند 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 رسم می کنند.
درک منحنی های bézier پیچیده است و ابزارهای بصری مانند این ژنراتور Lea Verou بسیار مفید هستند.
عملکرد تسهیل steps
گاهی اوقات ممکن است بخواهید که انیمیشن خود را کنترل دقیق تری داشته باشید و به جای حرکت در امتداد یک منحنی، بخواهید در فواصل زمانی حرکت کنید. تابع easing steps() به شما امکان می دهد تا جدول زمانی را به فواصل مساوی و تعریف شده تقسیم کنید.
.my-element {
animation-timing-function: steps(10, end);
}
اولین استدلال چند مرحله است. اگر مراحل به صورت 10 تعریف شده باشد و 10 فریم کلیدی وجود داشته باشد، هر فریم کلیدی به ترتیب برای مدت زمان دقیق پخش می شود، بدون انتقال بین حالت ها. اگر فریم های کلیدی کافی برای مراحل وجود نداشته باشد، بسته به آرگومان دوم، مراحل بین فریم های کلیدی اضافه می شوند.
بحث دوم جهت است. اگر روی 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;
}
می‌توانید تعیین کنید که تایم لاین در چه جهتی روی فریم‌های کلیدی شما با جهت حرکت حرکت کند:
-
normal: مقدار پیش فرض که فوروارد است. -
reverse: روی خط زمانی شما به سمت عقب اجرا می شود. -
alternate: برای هر تکرار انیمیشن، خط زمانی به ترتیب به جلو یا عقب اجرا می شود. -
alternate-reverse:alternateمتناوب .
animation-delay
.my-element {
animation-delay: 5s;
}
ویژگی animation-delay تعیین می کند که چه مدت باید قبل از شروع انیمیشن صبر کرد. مانند ویژگی animation-duration ، این یک مقدار زمانی را می پذیرد.
برخلاف ویژگی animation-duration ، می‌توانید آن را به عنوان یک مقدار منفی تعریف کنید. اگر یک مقدار منفی تنظیم کنید، خط زمانی در @keyframes شما از آن نقطه شروع می شود. به عنوان مثال، اگر انیمیشن شما 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: از قوانین هم برایforwardsو همbackwardsپیروی می کند.
خلاصه نویسی animation
به جای تعریف همه ویژگی ها به طور جداگانه، می توانید آنها را به صورت خلاصه animation تعریف کنید، که به شما امکان می دهد ویژگی های انیمیشن را به ترتیب زیر تعریف کنید:
-
animation-name -
animation-duration -
animation-timing-function -
animation-delay -
animation-iteration-count -
animation-direction -
animation-fill-mode -
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
ملاحظات در هنگام کار با انیمیشن
کاربران می توانند در سیستم عامل خود تعریف کنند که ترجیح می دهند هنگام تعامل با برنامه ها و وب سایت ها، حرکت تجربه شده را کاهش دهند. این اولویت را می توان با استفاده از پرس و جوی رسانه ترجیحات کاهش یافته شناسایی کرد.
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
این لزوماً ترجیح بدون انیمیشن نیست، بلکه ترجیحی برای کاهش انیمیشن‌ها است - به خصوص انیمیشن‌های غیرمنتظره . با این راهنمای انیمیشن می توانید درباره این اولویت و عملکرد کلی بیشتر بدانید.
درک خود را بررسی کنید
دانش خود را از انیمیشن ها تست کنید
نام یا شناسه سفارشی یک انیمیشن @keyframes به حروف بزرگ و کوچک حساس است؟
SWOOP و swoop با هم وجود داشته باشند. کلمات کلیدی from و to همان هستند
start و end .0% و 100%from همان 0% و to همان 100٪ است.0 و 1 animation-timing-function نیز معمولاً به عنوان شناخته می شود
حداقل تعداد فریم های کلیدی مورد نیاز در یک انیمیشن @keyframes چقدر است؟