مرحله دوم: تعریف و تمجید مختصات animation-name و animation-duration
مختصات برنامه کودکان، نقاط کلیدی را به یک عنصر خاص تخصیص میدهند و طرز تکان آن را تعریف و تمجید مینمایند. این دو ویژگی برای ایفا هر نوع انیمیشنی در CSS ضروری طراحی سایت اختصاصی می باشند.
animation-name
ویژگی animation-name اسم نقطه کلیدی را معین مینماید. هنگام اسمگذاری کارتن، میتوانید از حروف a تا z، اعداد ۰ تا ۹ و آرمهای “-” و “_” به کار گیری فرمائید.
درحالتی که چند نقطه کلیدی وجود داشته باشد که برنامه خردسالان یک عنصر را تعریف مینمایند، آن گاه می بایست مقادیر زیادی برای ویژگی animation-name تعریف و تمجید گردد. برای این فعالیت میتوانید اسم کیقابها را با یک مسافت و کاما غیر وابسته نمائید.
animation-duration
ویژگی animation-duration برهه زمانی فرصت برنامه کودکان را معلوم مینماید. اگرچه برنامه کودک ممکن میباشد بهشکل یک رینگ باشد که تر و تمیز تکرار میگردد، البته بایستی تعداد ثانیهها یا این که میلیثانیههای آن در ویژگی animation-duration مشخص و معلوم باشد. این ویژگی قادر است با مقدار صفر یا این که هر مقدار مثبتی تعریف و تمجید خواهد شد. مقادیر منفی مجاز نیستند.
مرحله سوم: تعریفوتمجید بقیه مختصات مایحتاج کارتن
علاوهبر خصوصیاتی که در قسمت پیشین گفته شد، یک سری ویژگی (Property) مهم دیگر هم میباشند که در پیاده سازی کارتون در CSS اصلی میباشند:
۱. Animation Timing
این ویژگی مشخص و معلوم مینماید که سرعت برنامه خردسالان چهطور تغییر تحول نماید. برای تعریف این مجالبندی از لغات پایین به کارگیری میشود:
Linear: سرعت اثبات
Ease-in: استارت آهسته
Ease-out: نقطه نهایی آهسته
Ease-in-out: استارت و نقطه نهایی آهسته
۲. Animation Delay
با این ویژگی می توانید گزینش نمایید که برنامه کودکان چه هنگامی استارت گردد. از جملهً، درحالتی که میخواهید برنامه خردسالان ۲ ثانیه بعداز لود کاغذ استارت گردد، می توانید از این ویژگی به کار گیری فرمایید.
۳. Animation Iteration Count
این ویژگی تعداد تکرارهایی را که کارتن پخش میشود را معین مینماید. به صورت نمونه، میتوانید گزینش فرمایید که یک کارتن صرفا یک توشه پخش خواهد شد یا این که به طور مداوم تکرار گردد.
۴. Animation Direction
این ویژگی معین مینماید که برنامه خردسالان به چه جهتی تکان نماید.
۵. Animation Fill Mode
این ویژگی به شما قابلیت و امکان میدهد که تصمیم بگیرید خصوصیتهای CSS برنامه کودک در زمان و بعداز اجرای کارتن به چه شکل شغل نمایند. چهار وضعیت ممکن این ویژگی عبارتند از:
Normal: در این صورت، خصوصیتهای CSS فقط هنگامی که کارتون در اکنون پخش میباشد، انجام می شود.
Forwards: در این صورت، مقادیر خصوصیتهای CSS تا وقتیکه کارتون ایفا میشود، باقی می مانند و بعد از نقطه پایان برنامه کودک، مقادیر واپسین کیکادر (واپسین مرحله از برنامه کودک) بر روی المان نگهداری میگردد.
Backwards: در این صورت، المان پیش از آغاز اجرای برنامه کودک مقادیر خصوصیتهای CSS را از کیقاب اول (اولی مرحله از برنامه خردسالان) اخذ و اجرا مینماید.
Both: دراینصورت، مقادیر خصوصیتهای CSS هم پیش از استارت اجرای کارتون و هم بعداز نقطه پایان آن اجرا میگردد.
۶. (Animation Play State)
این ویژگی به شما قابلیت میدهد تا برنامه خردسالان را متوقف فرمائید یا این که ادامه دهید. برای مثال، درحالتی که می خواهید یک کارتون را متوقف نمایید، می توانید از شرایط “paused” به کار گیری فرمایید.
اشکال کارتن در CSS
در برنامه کودکان CSS، میگردد اشکال مختلفی از حرکات و جلوهها را تشکیل داد که به طور دینامیک در صفحه ها تارنما اکران داده شوند. درین قسمت بعضی از اشکال متداول کارتونها در CSS تحقیق گردیدهاست:
Fade In .۱ (ظواهر شدن):
دراین نوع کارتون، عنصر به آرامی ظواهر میشود. برای این فعالیت از ویژگی opacity برای انتخاب شفافیت عنصر به کار گیری میگردد. مثلا:
fade-in {
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
Fade Out .۲ (ناپدید شدن):
دراین نوع برنامه کودک، عنصر به آرامی ناپدید میگردد. برای این عمل مقدار ویژگی opacity از مقدار اول، به صفر تغییر تحول مینماید.
Slide In/Out .۳ (لغزش به باطن/بیرون):
با به کار گیری از ویژگیهای transform و translate, می گردد موادسازنده را به سمت چپ، راست، بالا یا این که ذیل لغزاند. برای مثال:
slide-in {
transform: translateX(-100%);
animation: slideIn 1s forwards;
}
@keyframes slideIn {
to {
transform: translateX(0);
}
}
Rotate .۴:
با ویژگی transform و زاویهی چرخش، میتوانید عنصرها را بدور اساس خویش بچرخانید. برای مثال:
rotate {
transform: rotate(45deg);
animation: spin 2s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
Scale .۵ (غلو/کوچکنمایی):
با ویژگی transform و Scale، می توانید ارکان را به صورت بلندمرتبهخیس یا این که خردخیس اکران دهید. مثلا:
scale-up {
transform: scale(1.5);
animation: pulse 1s alternate infinite;
}
@keyframes pulse {
to {
transform: scale(1);
}
}
Bounce .۶:
این نوع برنامه کودک سبب ساز می شود موادتشکیل دهنده به صورت تکراری و با سرعت کمتر پریدن نمایند. برای تعریفوتمجید فرآیند پریدن می توانید از کیکادر (keyframes) استعمال نمایید. برای مثال:
bounce {
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
Pulse .۷:
این نوع کارتن منجر میگردد ارکان به طور متناوب گران قدر و خرد شوند. میتوانید از keyframes برای تعریف و تمجید پروسه نبض به کارگیری فرمایید. مثلا:
pulse {
animation: pulse 1s alternate infinite;
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
Shake .۸:
با به کارگیری از keyframes، می توانید در ارکان دلخواه لرزش ساخت و ساز فرمائید. از جمله:
shake {
animation: shake 0.5s infinite;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
به کار گیری از رپورتاژ اطلاع رسانی و نشر در کانالهای اجتماعی