مای دیزاین را همراه با آموزش های جدید در سایت طوسی دنبال کنید: http://tooc.ir
آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
ایجاد انیمشین با استفاده از CSS (بخش دوم)

ایجاد انیمشین با استفاده از CSS (بخش دوم)
سلام. در این پست قصد دارم نکات تکمیلی و همچنین توضیح بیشتری راجع به مبحث انیمیشن در سی اس اس ۳ خدمتتون بگم.
ابتدا باید پست “ایجاد انیمشین با استفاده از CSS” رو خوانده باشید.
در این جلسه قصد دارم خاصیت های animation رو به صورت کامل براتون توضیح بدم که حالت کلی آن به صورت زیر است:

animation: name duration timing-function delay iteration-count direction play-state;

– animation-name: نامی است که در keyframe برای انیمیشن انتخاب کردیم. (مثال: mydesign)

– animation-duration: زمان انجام کل انیمیشن از اول تا انتها بر حسب ثانیه (مثال: ۵s)

– animation-timing-function: مشخص کننده منحنی سرعت (اوج و فرود سرعت در طول حرکت)
این خاصیت شامل چندین گزینه است:
Leaner: سرعت یکسان از ابتدا تا انتها
Ease: با سرهت کم شروع میشود سپس بلافاصله سرعت آن زیاد شده و در پایان مجدد کاهش میابد.
Ease-in: با سرعت کم شروع میشود و سرعت زیاد میشود.
Ease-out: با سرعت زیاد شروع شده و کم میشود.
مقدار پیش فرض در انیمشین خاصیت ease است.

– animation-delay: این خاصیت مقدار زمان انتظار قبل از شروع انیمیشن را تنظیم میکند. (مثال: ۳s)

– animation-iteration-count: تعداد دقعات تکرار انیمیشن که در حالت کلی بی نهایت بار تکرار میشود (مثال: ۳ یا infinite)

– animation-direction: این مقدار بیانگر جهت انجام انیمیشن است:
این خاصیت شامل چندین گزینه است:
Normal: انیمیشن از ابتدا به انتها به صورت معمولی انجام میشود.
Reverse: انیمیشن به صورت برعکس انجام میشود.
Alternate: انیمیشن در هر مرحل به صورت بر عکس مرحله قبل انجام میشود (رفت و برگشت)
Alternate-reverse: برعکس حالت قبل است. یعنی ابتدا برعکس انجام شده و سپس ادامه انیمیشن

– animation-play-state: با این گزینه میتوانید انیمیشن را فعال یا متوقف کنید (میتوانید با استفاده از دستورات جاوا به سادگی این امکان را برای کاربر فراهم کنید):
Paused: متوقف
Running: اجرا

مثال کلی:

animation: mydesign 5s leaner 2s 3 reverse running;

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

یک پاسخ به “ایجاد انیمشین با استفاده از CSS (بخش دوم)”

  1. سام گفت:

    عــــــــــــــــــــــــــــــــــــــــــــــــــــــــــالی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
اکشن زیبای فتوشاپ BadDay
طرح لایه باز نرم افزار پخش کننده موزیک
مجموعه آیکون های تخت موبایل (سری سوم)
طرح لایه باز کاور آماده پست
طرح لایه باز پرچم ۱۹۵ کشور صاف (flat)
طرح لایه باز ساعت سفید