جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگاننحوه کار با انیمیشن ها یا Animations در CSS3

نحوه کار با انیمیشن ها یا Animations در CSS3

5 آبان 1400
ارسال شده توسط همیار من
دوره های رایگان
320 بازدید
آموزش صفحه بندی یا Pagination در CSS

کار با انیمیشن ها یا Animations در CSS3

فهرست عناوین

  • کار با انیمیشن ها یا Animations در CSS3
  • عدم پشتیبانی برخی از مرورگرها از انیمیشن ها + نحوه رفع مشکل
  • آشنایی با قانون keyframes@ در CSS3
  • کار با ویژگی Animation-Name در CSS3
  • کار با ویژگی Animation-Duration در CSS3
  • کار با ویژگی Animation-Delay در CSS3
  • کار با ویژگی Animation-Iteration-Count در CSS3
  • کار با ویژگی Animation-Direction در CSS3
  • کار با ویژگی Animation-Timing-Function در CSS3
  • کار با ویژگی Animation-Fill-mode در CSS3
  • کار با ویژگی Animation-Play-State در CSS3
  • نحوه خلاصه نویسی ویژگی Animation در CSS3

Animation ویژگی است که با استفاده از آن میتوان عناصر را در یک صفحه وب به حرکت درآورد و یا به اصطلاح میتونیم بگیم با استفاده از این ویژگی میتوان عناصر را در یک صفحه وب متحرک کرد.

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

در این جلسه ما با ویژگی های زیر که مرتبط با انیمیشن ها در CSS3 می باشند کار خواهیم کرد :

  • @keyframes : یک قانون جهت نحوه اجرای انیمیشن
  • animation-name : نام انیمیشن برای اتصال به دستور کی فریم
  • animation-duration : مدت زمان اجرای انیمیشن را مشخص میکند
  • animation-delay : مدت زمانی را برای شروع شدن انیمیشن مشخص میکند
  • animation-iteration-count : تعداد دفعات اجرای انیمیشن را مشخص میکند
  • animation-direction : جهت اجرای انیمیشن را مشخص میکند
  • animation-timing-function : منحنی اجرای انیمیشن را مشخص میکند
  • animation-fill-mode : جهت حفظ استایل یک عنصر در هنگام پایان یافتن انیمیشن
  • animation-play-state : استپ کردن انیمیشن

در ادامه و تا پایان این جلسه میخوام شمارو با تمامی ویژگی های بالا آشنا کنم، بطوریکه پایان این جلسه دیگه بطور کامل با همه ی آنها آشنا شده باشید و بتونید باهاشون کار کنید.

عدم پشتیبانی برخی از مرورگرها از انیمیشن ها + نحوه رفع مشکل

تمامی ویژگی هایی که در لیست بالا مشاهده مینمایید در برخی از مرورگرهای اینترنتی در حالت عادی پشتیبانی نمی شوند ، لذا ما باید از یه تکه کد مخصوص استفاده نماییم تا اون مرورگرها بتونن از اون ویژگی ها پشتیبانی کنند.

اینکه میگم برخی از مرورگرها ، منظورم از نسخه های قدیمی این مرورگرهاست، مثلا نسخه ۴ مرورگر فایرفاکس قدرت پشتیبانی از این ویژگی هارو نداره در نتیجه ما باید از اون تکه کدی که گفتم استفاده نماییم.

در جدول زیر نام مرورگرهای اینترنتی و یک عدد وجود داره که اون عدد نسخه / ورژن اون مرورگر رو مشخص میکنه، و داره میگه ویژگی های انیمیشن از اون نسخه به بعد پشتیبانی میشه لذا ما باید برای قبل از اون نسخه از همون تکه کدی که الان میگم براتون استفاده نماییم.

نام ویژگی Chrome Firefox Opera Safari IE
keyframes@ ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰
animation-name ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰
animation-duration ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰
animation-delay ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰
animation-iteration-count ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰
animation-direction ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰
animation-timing-function ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰
animation-fill-mode ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰
animation-play-state ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰
animation ۸٫۰ ۴٫۰ ۱۵٫۰ ۶٫۰ ۱۰٫۰

رفع مشکل عدم پشتیبانی

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

نام مرورگر Chrome Firefox Opera Safari
دستور پیشوندی -webkit- -moz- -webkit- -webkit-

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

آشنایی با قانون keyframes@ در CSS3

دستور keyframes@ میتونه یک قانون برای نحوه ی اجرای انیمیشن ایجاد کنه، مثلا با استفاده از این قانون میتونیم بگیم یک عنصر در طول اجرای انیمیشن تا پایان اجرا، رنگ زمینش فلان رنگ باشد و دیگر ویژگی هایی که میتونیم روش اعمال کنیم.

نکته ای که در مورد این دستور وجود داره اینه که ما باید این دستور رو با ویژگی Animation متصل کنیم، یعنی باید بهم وصل شن تا انیمیشن بتونه اجرا شه.

برای متصل شدن keyframes با انیمیشن ما باید از ویژگی animation-name برای ایجاد نام استفاده نماییم و سپس اون نامی که ایجاد کردیم رو بزاریم درون دستور keyframes . (لطفا به دستورات زیر توجه نمایید)

1
2
3
4
5
6
7
div {
  animation-name: test;
}
 
@keyframes test {
.....
}

کار با ویژگی Animation-Name در CSS3

همونطور که از نام این ویژگی هم مشخصه ، با استفاده از آن میتوان یک نام را برای انیمیشن مشخص کرد، که این نام را باید درون دستور / قانون keyframes@ که کمی بالاتر باهاش آشنا شدید قرار داد.

مثال : در مثال زیر رنگ عادی و پیش فرض عنصر قرمز می باشد ولی با اجرا شدن انیمیشن رنگ عنصر ۶ ثانیه طول میکشه تا از رنگ نارنجی به رنگ سبز تبدیل شود.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
 
div {
animation-name: free-learn;
animation-duration: 6s;
}
 
@keyframes free-learn {
from {background-color: #FF5722;}
to {background-color: #5db616;}
}
 
</style>

 

کار با ویژگی Animation-Duration در CSS3

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

مقداری که این ویژگی میتونه بپذیره از نوع زمان می باشد و به شرح زیر : ( هر ۱۰۰۰ میلی ثانیه ۱ ثانیه می باشد )

  • s : برحسب ثانیه
  • ms : برحسب میلی ثانیه

مثال :

1
2
3
4
div {
animation-name: free-learn;
animation-duration: 2000ms;
}

 

کار با ویژگی Animation-Delay در CSS3

ما علاوه بر مدت زمانی که باید طول بکشه تا یک انیمیشن اجرا بشه، یک زمان هم برای شروع اجرای انیمیشن میخوایم، یعنی میتونیم بگیم ۳ ثانیه بگذره بعدش انیمیشن شروع بشه.

مقداری که این ویژگی میتونه بپذیره از نوع زمان می باشد و به شرح زیر : ( هر ۱۰۰۰ میلی ثانیه ۱ ثانیه می باشد )

  • s : برحسب ثانیه
  • ms : برحسب میلی ثانیه

مثال :

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-delay: 1s;
}

 

کار با ویژگی Animation-Iteration-Count در CSS3

در ادامه ی ( آموزش کار با انیمیشن ها یا Animations در CSS3 ) میخواهیم با ویژگی Animation-Iteration-Count آشنا شویم، با استفاده از این ویژگی میتوان تعداد دفعات اجرای انیمیشن را مشخص کرد، مثلا بگیم انیمیشن ما به تعداد ۳ بار تکرار شود.

این ویژگی ۲ مقدار زیر را میتواند بپذیرد :

  • number : یک عدد از ۱ تا هرعددی که دوس داشتید
  • infinite : بدون تعداد دفعات یعنی تا همیشه

مثال شماره ۱ : اجرا با تعداد دفعات مشخص شده

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-iteration-count: 2;
}

 

مثال شماره ۲ : اجرای بی نهایت

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 1s;
animation-iteration-count: infinite;
}

 

کار با ویژگی Animation-Direction در CSS3

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

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

  • normal : بصورت پیش فرض این گزینه می باشد
  • reverse : جهت شروع انیمیشن را معکوس میکند
  • alternate : از نقطه شروع بسمت نقطه پایان بصورت متناوب
  • alternate-reverse : برعکس حالت بالا – یعنی از نقطه پایان بسمت نقطه شروع بصورت متناوب

مثال شماره ۱ : در حالت معکوس یا reverse

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-direction: reverse;
}

 

مثال شماره ۲ : در حالت متناوب Alternate ( از نقطه شروع به پایان بصورت متناوب )

1
2
3
4
5
6
div {
animation-name: free-learn;
animation-duration: 2s;
animation-iteration-count:infinite;
animation-direction: alternate;
}

 

مثال شماره ۳ : حالت متناوب معکوس ( از نقطه پایان به شروع بصورت متناوب )

1
2
3
4
5
6
div {
animation-name: free-learn;
animation-duration: 2s;
animation-iteration-count:infinite;
animation-direction: alternate-reverse;
}

 

کار با ویژگی Animation-Timing-Function در CSS3

با استفاده از این ویژگی نیز میتوان یک منحنی زمان ( جهت اجرای انیمیشن ) ایجاد کرد.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

  • linear : از شروع تا پایان با سرعت یکسان
  • ease-in : شروع با سرعت کم و یواش
  • ease-out : پایان با سرعت کم و یواش
  • ease-in-out : شروع و پایان با سرعت کم
  • steps(int,start|end) : تکه تکه کردن سرعت اجرای انیمیشن
  • cubic-bezier(0-1,0-1,0-1,0-1) : استفاده از منحنی بزیر یک مقدار از ۰ تا ۱

مثال شماره ۱ : از حالت linear

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-timing-function:linear;
}

 

مثال شماره ۲ : از حالت ease-in-out

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}

 

مثال شماره ۳ : از حالت steps(int,start|end)

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-timing-function: steps(4,start);
}

 

مثال شماره ۴ : از حالت cubic-bezier

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

 

کار با ویژگی Animation-Fill-mode در CSS3

با یکی دیگر از ویژگی های انیمیشن از آموزش کار با انیمیشن ها یا Animations در CSS3 با شما همراه هستم، این ویژگی داره میگه که استایل یک عنصر رو در حالت شروع ( from ) و حالت پایان ( to ) و یا در هر ۲ حالت قانون keyframes ، همواره پس از پایان انیمیشن حفظ کن.

فک کنم خوب توضیح ندادم، ببینید اگه مثلا در حالت شروع انیمیشن ما برای یک عنصر رنگ آبی رو تنظیم کنیم ، وقتی انیمیشن تموم شد اون عنصر همچنان رنگش آبی خواهد موند. ( این یعنی حفظ استایل )

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

  • forwards :
  • backwards :
  • both :

مثال شماره ۱ : حالت Forwards

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-fill-mode: forwards;
}

 

مثال شماره ۲ : حالت Backwards

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-fill-mode: backwards;
}

 

مثال شماره ۳ : حالت both ( در هر ۲حالت )

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-fill-mode: both;
}

 

کار با ویژگی Animation-Play-State در CSS3

اسمش روشه دیگه ، با استفاده از این ویژگی میتوان انیمیشن رو استپ کرد یا در واقع Paused کرد.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

  • running : بصورت پیش فرض این گزینه می باشد، یعنی انیمیشن اجرا میشود
  • paused : انیمیشن مکث میشه

مثال شماره ۱ : مکث کردن انیمیشن

1
2
3
4
5
div {
animation-name: free-learn;
animation-duration: 2s;
animation-play-state: paused;
}

 

نحوه خلاصه نویسی ویژگی Animation در CSS3

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

شکل کلی استفاده از این ویژگی بصورت زیر می باشد :

1
animation: name|duration|timing-function|delay|iteration-count|direction|fill-mode|play-state;

مثال شماره ۱ :

1
2
3
div {
animation: test 2s 3;
}

 

مثال شماره ۲ :

1
2
3
div {
animation: test 2s 1s 4 alternate;
}

 

بیشتر بخوانیم:

  • آموزش کار با عناصر Block و Inline در CSS
  • آموزش رایگان HTML مقدماتی تا پیشرفته بخش عناصر
  • نحوه کار با فرم ها در CSS
  • راهنمای کامل ترازبندی متن ها در CSS
اشتراک گذاری:
برچسب ها: AnimationsCSS3آموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانانیمیشنانیمیشن ها در css
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

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

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

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت