دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS3 » فیلم آموزش Animation ( متحرک سازی ) در CSS3
فیلم آموزش Animation ( متحرک سازی ) در CSS3 | وب سیتی

فیلم آموزش Animation ( متحرک سازی ) در CSS3

در این قسمت از فیلم آموزش CSS3 در مورد انیمیشن ها آموزش داده ایم . در این فیلم آموزش animation اول در مورد این که انیمیشن چیست و چرا از اون استفاده می کنیم توضیحاتی رو داده ایم و سپس نحوه استفاده از اون رو آموزش داده ایم .

Animation ( انیمیشن ) چیست ؟

انیمیشن یا متحرک سازی این امکان رو در css به ما میده که استایل عناصر رو به تدریج از حالتی به حالتی دیگر تغییر بدیم . شما می تونید اکثر ویژگی های CSS رو با استفاده از انیمیشن در زمان مشخصی که می خواید تغییر بدید .

برای اینکه بتونید یک انیمیشن واسه اون عنصری که میخواید درست بکنید باید تغییرات ویژگی های اون رو در یک  keyframes@  تعریف بکنید و از اون فریم های کلیدی استفاده بکنیم . در استفاده از این keyframes از انتخابگر های from و to استفاده می کنیم که from برای حالت اولیه است و to برای حالتی است که می خواهیم عنصر مورد نظر اون ویژگی هارو داشته باشه .

کد CSS زیر رو مشاهده بکنید :

برای هر keyframes باید یک اسم مشخص بکنید و اون اسم رو هم با استفاده از ویژگی animation-name به اون عنصر مورد نظر بدید تا انیمیشن شما اجرا بشه .

ویژگی animation-duration :

 این ویژگی مشخص کننده زمان اجرای انیمیشن است که شما می توانید برای اجرای هر انیمیشن خود بر حسب ثانیه زمان مشخص بکنید .

ویژگی animation-delay : این ویژگی در انیمیشن میزان تاخیر رو مشخص می کنه . برای مقدار دادن به اون هم می تونید از ثانیه استفاده بکنید .  بقیه ویژگی ها رو می تونید در فیلم آموزش animation مشاهده بکنید که کامل توضیح داده شده است .

کد HTML :

کد CSS :

اگر کدهای بالا را اجرا کنید یک انیمیشن ساده را ملاحضه می کنید که در فیلم آموزش animation به صورت کامل آن را توضیح داده ایم .

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

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

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :


  1. ARYO گفت:

    حتما باید یاد بگیرم کد اماده نداره؟

  2. ARYO گفت:

    سایتای بزرگ برای ارسال مطلب جدید اچ تی ام ال رو ویرایش میکنن. و اونوقت برای دیده شدن مطلب نیاز به رفرش نداره. وقتی من همینکارو میکنم برای دیده شدن مطلب باید رفرش کنم. چرا؟ ایا نیازی به نوشتن پی اچ پی یا چیز دیگه ای داره؟

    • رضا طوماری گفت:

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

  3. ARYO گفت:

    منظورم این بود که سی اس اس قبلی رو لود میکنه و برای لود شدن سی اس اس جدید باید صفحه رو رفرش کرد. الان هیچ راهی به جز پاک کردن کش و رفرش برای نشون دادن سی اس اس جدید نیست؟

    • رضا طوماری گفت:

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

  4. ARYO گفت:

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

    • رضا طوماری گفت:

      سلام
      کامل متوجه نشدم ، شاید صفحه سایتتون تو مرورگر کش شده و همون استایل های قبلی رو نشون میده ، اگه کش مرورگر رو پاک کنید نشون میده .

جواب سوال چیه ؟ *