آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

animation در css3

CSS

فصل چهارم : Properties در CSS

جلسه نوزدهم   : animation در CSS3

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه ی آموزشی animation و مقادیر اون رو خدمتتون آموزش میدم . لازمه که قبلش جلسه ی آموزشی مربوط به @keyframe هارو مطالعه بفرمایید .

 

animation در CSS3

این خاصیت shorthand یا خلاصه نویسی خاصیت های زیر هست :

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-play-state

 

قاعده ی دستوری خاصیت animation

animation-name : این خاصیت نام کلیدواژه ای هست که در keyframe استفاده می کنید و به عنصر مورد نظر اختصاص میدید .

animation-duration : این خاصیت زمانی رو مشخص می کنه که انیمیشن کامل میشه ، یعنی در چه بازه ی زمانی انیمیشن شروع شود و سپس پایان یابد . این زمان رو به میلی ثانیه وارد می کنید .
animation-timing-function
: این خاصیت منحنی سرعت رو مشخص می کنه که شامل مقادیر زیر میشه :

linear : انیمیشن از ابتدا تا انتها با سرعت یکسان حرکت می کنه و انجام میشه .

Ease : مقدار پیشفرض این خاصیت هست . انیمیشن با سرعت نسبتا کم شروع میشه و سریع سرعتش افزایش پیدا میکنه و وقتی به انتها میرسه دوباره سرعتش کم میشه .

ease-in : انیمیشن با سرعت کم شروع میشه و با سرعت زیاد به اتمام میرسه .

ease-out : انیمیشن با سرعت زیاد شروع میشه و با سرعت کم به اتمام میرسه.

ease-in-out : انیمیشن با سرعت کم شروع میشه بین انیمیشن یکم سرعت افزایش پیدا می کنه و با سرعت کم به اتمام میرسه .

cubic-bezier(n,n,n,n) : مقادیر دلخواهتون رو میتونید برای این خاصیت تعریف کنید . مقادیر امکانپذیر ۰ تا ۱ هست . میتونید برای تنظیم مقادیر از این سایت http://cubic-bezier.com استفاده کنید .

animation-delay : این خاصیت مکثی رو قبل از شروع انیمیشن تعیین می کنه ، مثلا ۲ ثانیه میگذره و بعد انیمیشن شروع میشه.
animation-iteration-count
: تعداد دفعات انیمیشن رو مشخص می کنه . مثلا انیمیشن ۳ مرتبه تکرار بشه.
animation-direction.
: این خاصیت تعیین میکنه که انیمیشن شما بصورت عادی انجام بشه یا برعکس که شامل موارد زیر میشه :

normal : مقدار پیش فرض این خاصیت هست و انیمیشن بصورت عادی کار خودش رو انجام میده .

Reverse : انیمیشن برعکس انجام میشه .

Alternate : پس از هر بار به اتمام رسیدن انیمیشن عملیات reverse انجام میشه (یعنی به اتمام که رسید بصورت برعکس انیمیشن تکرار میشه) و همینطور بصورت رفت و برگشت و مکرر انجام میشه .

alternate-reverse : این حالت با حالت قبلی کاملا برعکسه . یعنی انیمیشن بجای اینکه بصورت عادی شروع بشه ، برعکس شروع میشه و وقتی به اتمام میرسه دوباره به همون حالت برمیگرده و این روند همینشور تکرار میشه .

animation-play-state : با این مقدار میتونید تعیین کنید که انیمیشن pausedباشه یا اجرا بشه. میتونید دو تا دکمه بگذارید stop و  start با جی کوئری تعریف کنید که با دکمه stop انیمیشن متوقف بشه و با زدن دکمه start انیمیشن اجرا بشه . که مقادیر زیر رو شامل میشه :

paused : با این مقدار انیمیشن متوقف میشه .

Running : با این مقدار انیمیشن اجرا میشه .

 

پشتیبانی مرورگرها از خاصیت  animation در CSS3

مرورگرهای زیر این خاصیت رو پشتیبانی می کنند :

IE10+ , Firefox , Chrome , safari , Opera

 

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

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

دموی آنلاین

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • حمید

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

    • میترا رحیمی

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

  • hassany

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

  • hossein hassani

    خاصیت animation-fill-mode رو هم توضیح میدین؟

  • hossein hassani

    سلام من انیمیشنی که قول داده بودم رو ساختم یه جور نقاشی متحرکه که برای نمایش بهتر اون پیشنهاد میکنم در نمای تمام صفحه مرورگر بازش کنید.تعداد زیادی از خواص css توی این نقاشی به کار گرفته شده که اگه کسی اونو دوباره بسازه تسلط خوبی روی خواص پیدا میکنه.
    http://s5.picofile.com/file/8168634376/sun.rar.html

  • علیرضا کریمی نژاد

    انیمیشن آقای hossein hassani واقعا فوق العاده و جذاب بود
    سر فرصت حتما به عنوان تمرین برای خودم انجامش میدم

  • هکر کلاه سفید

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟