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

animation در css3

در این جلسه ی آموزشی animation و مقادیر اون رو خدمتتون آموزش میدیم.

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

 

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

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

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۷

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

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

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

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

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

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین