آموزش انیمیشن در CSS و نحوه استفاده از Animation

آموزش انیمیشن در CSS و نحوه استفاده از Animation

آموزش انیمیشن در CSS و نحوه استفاده از Animation
هادی قربانی
زمان انتشار دوره : ۱۳۹۷/۸/۱۷

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

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

دست آورد های هادی قربانی

- مدیر و موسس جامعه وبدونی

- مدیر و موسس وبدونی مارکت

- مدیر و موسسه کمپ تاتس سایت آموزش انلاین

- راه اندازی بیش از 5 هزار سایت

- پشتیبانی بیش از 4 هزار سایت مختلف

- تاسیس وب سایت بیگ تم ( تو زمینه کاری خودش اول بود ) که به فرد دیگری واگذار شد

- تاسیس سایت دیجی وردپرس یکی از مراجع حرفه ای وردپرس در ایران

- ارائه بیش از هزاران مقاله در زمینه های مختلف

- تسلط به زبان HTML و HTML5

- تسلط به CSS و CSS3

- تسلط به زبان php

- تسلط به جی کوئری و آجاکس

- تسلط در طراحی قالب های وردپرس

- تسلط در طراحی سیستم های حرفه ای تحت وب

- ارائه آموزش خصوصی به بیش از 1000 نفر

- سئو و بهینه سازی چنیدن وب سایت بزرگ و کوچک

- آشنایی کامل و تسلط به ابزار ها و سیستم های مختلف گوگل

- مشاوره سئو به بیش از هزار سایت و کسب و کار های اینترنتی

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

- و بسیاری موارد دیگه که اگه بنویسم تموم نمیشه ... :)

مواردی که دوس دارم دائما باهاشون سر و کله بزنم:

- توسعه دهنده وب 

- طراحی وب سایت های حرفه ای 

- وردپرس ( یه زمونی هم خورد و خوراک و خواب و همه چیم شده بود وردپرس )

- سئو ( زمینه ای هست که تخصص زیادی بدست آوردم و تسلط کامل دارم بهش )

- فریم ورک سیمفونی ( در عرض 1 ماه بهش مسلط شدم سیستم قدرتمندی هست )

- برنامه نویسی به زبان های مختلف

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

- تبدیل کمپ تاتس به بزرگترین بزند آموزش انلاین در ایران و خاورمیانه

- تبدیل وبدونی مارکت به بزرگترین و برند و بازار فایل های دیجیتال

- و ...

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

انیمیشن در CSS یکی از قابلیت های بی نظیر کدنویسی سی اس اس می باشد. با استفاده از animation css قادر خواهید بود بدون اینکه نیاز به از کدهای جاوا اسکریپت , فلش و جی کوئری و ... باشد به راحتی می توان طرح های خلاقانه ای را به انیمیشن و متحرک طراحی کرد. در این دوره با هم ویژگی animation در سی اس اس رو بررسی خواهیم کرد و نحوه استفاده از اون رو یاد خواهیم گرفت.

نحوه استفاده از Animation در CSS و ساخت عناصر متحرک در سایت

با این بخش از آموزش css همراه ما باشید. یکی از دلایل محبوبیت و جذابیت کدنویسی Css قابلیت انیمیشن می باشد که در نسخه css3 به صورت حرفه ای گنجانده شده. ممکن است در سایت های زیادی افکت های متحرک و انیمیشنی مشاده کرده باشید. باید بدانید که بیشتر وب سایت ها از این ویژگی css animation برای ایجاد المان ها و عناصر متحرک در سایت خود استفاده می کنند.

CSS Animation چیست ؟

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

آموزش استفاده از Css Animation

نحوه استفاده از انیمیشن در css

برای استفاده از این قابلین بی نظیر چند نکته باید رعایت شود که در ادامه به آنها اشاره می کنیم.

  • ابتدا باید انیمیشن را تعریف کنیم
  • برای انیمیشن مبدا و مقصد مشخص کنیم
  • و در نهایت ویژگی های انیمیشن را به المان مورد نظر اختصاصی دهیم.

تعریف یک انیمیشن در سی اس اس

توجه داشته باشید که ابتدا باید انیمیشنی که می خواهید را در بین کدهای css خود تعریف کنید. نحوه تعریف با @keyframes می باشد که یک اسم به آن اختصاص داده می شود. در ادامه یک مثال ساده از کی فریم انیمیشن را می توانید مشاهده کنید

/* The animation code */
@keyframes camptuts {
    from {background-color: red;}
    to {background-color: yellow;}
}

در مثال بالا ما یک keyframes با نام camptuts تعریف کردیم. اسم انتخابی کاملا اختیاری است و شما می توانید از هر اسمی استفاده کنید. مثلا اسم آن را myanimate بزارید یا هر چیز دیگری.

همان طور که در مثال مشاده می کنید ما یک مبدا با اصطلاح from و یک مقصد با اصطلاح to تعریف کردیم. به این شکل که گفته شده ابتدا در مبدا المان دارای پس زمینه فرمز رنگ باشد و در مقصد رنگ پس زمینه به زرد تغییر کنید.

به طور کلی تعریف یک انیمیشن در CSS به این شکل می باشد. بعد از تعریف می توان این انیمیشن را به المان ها و عناصر دلخواه در صفحه وب سایت اختصاص داد. توجه داشته باشید از یک css animation می توان در قسمت های مختلف به تعداد نامحدود استفاده کرد و نیازی به تعریف مجدد keyframes نیست.

آموزش css animation و نحوه استفاده از انیمیشن در سی اس اس

نحوه استفاده از keyframes تعریف شده

خب در این مرحله باید مشخص کنید که به چه چیزی در صفحه می خواهید افکت انیمیشن بدهید. مثلا به یک div , یا برای زمانی که چیزی هاور می شود و یا ..... به مثال زیر توجه کنید.

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: camptuts;
    animation-duration: 4s;
}

در مثال بالا مه انیمیشنی که با نام camptuts ایجاد و تعریف کرده بودیم را به div داده ایم. مثلا این انیمیشن را در این لینک ببینید.

همان طور که مشاده می کنید ویژگی animation-name مربوط به نام انیمیشن می باشد که باید دقیقا همان نامی باید که برای keyframe تعریف کرده ایم. ویژگی animation-duration مشخص می کند که زمان انیمیشن و تحرک المان مورد نظر چقد طول بکشد.

ویژگی های انیمیشن در css

علاوه بر ویژگی های animation-duration و animation-duration ویژگی های دیگری نیز وجود دارد که در زیر می توانید لیست مربوط به آنها را مشاهده کنید.

@keyframes = با استفاده از این ویژگی می توان نام و نحوه انیمیشن را تعریف کرد
animation-name = با این ویژگی می توان نام انیمیشن را به المان مورد نظر داد
animation-duration = این ویژگی مشخص می کند زمان انجام انیمیشن چقدر طول میکشد
animation-delay = این ویژگی یک تاخیر در انیمیشن ایجاد می کندو مثلا شروع بعد از 2 ثانیه
animation-direction = این ویژگی مشخص می کند که انیمیشن به سمت جلو , عقب یا در چرخه های مختلف حرکت کند
animation-fill-mode = این ویژگی یک سبک خاصی به انیمیشن میدهد برای زمانی که انیمیشن حرکت نمی کند یا حرکت میکند و ای هر دو
animation-iteration-count = این ویژگی مشخص می کند که تعداد دفعات تکرار انیمیشن چند بار باشد
animation-play-state = این ویژگی برای مشخص شدن این است که انیمیشن در حال حرکت است یا نه
animation-timing-function = این ویژگی انحنای سرعن حرکت انیمیشن برای مشخص می کند.
animation = با این ویژگی می توانید تمامی ویژگی های دیگر را به صورت یکجا تعریف کنید

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

div {
    animation: camptuts 5s linear 2s infinite alternate;
}

در کد بالا ما با یک ویژگی به نام animation-duration خاصیت سایر ویژگی ها به صورت یکجا تعریف کرده این که در این صورت حجم کدنویسی ما کاهش پیدا خواهد کرد.

سازگاری animation css در مرورگر های مختلف دنیا

شما به عنوان برنامه نویس باید بدانید که در انواع زبان های برنامه نویسی ممکن است توابع , ویژگی و مواردی وجود داشته باشد که فقط در برخی مروگر های روز دنیا قابل اجرا می باشد. از این رو قابلیت سی اس اس انیمیشن نیز شامل این مورد می شود. در ادامه نحوه استفاده از CSS Animation در انواع مرور را مشخص می کنیم و بررسی می کنیم که چه مرورگرهایی از این ویژگی css پشتیبانی می کنند.

سازگاری css animation در مرورگرهای مختلف

حال که با کاربرد و استفاده از انیمیشن های متحرک در سی اس اس آشنا شدید می توانید به راحتی انواع طرح های حرفه ای و خلاقانه ایجاد کنید. برای مشاده مثال های بیشتر در مورد css animations به سایت w3school  لینک مربوط به animation مراجعه کنید. 

چند نمونه ساخت انیمشن با CSS را می توانید در زیر مشاهده کنید.

https://codepen.io/FabioG/pen/QjLreK

نمونه انیمیشن دیگری که یک ساعت است و فقط با CSS و HTML طراحی شده.

https://codepen.io/iliadraznin/pen/JcqbE

حرکت یک اتوبوس از خیابان طراحی شده با css

https://codepen.io/pushpan999/pen/zomBbd

css animation متحرک برای پس زمینه

https://codepen.io/amcmahon/pen/LGyjqX

نمونه انیمیشن مولکول های متحرک برای پس زمینه با css و jquery

https://codepen.io/nguyenvan/pen/xWRPmM

همان طور که در نمونه های بالا مشاهده کردید کارهای خلاقه ای می توان با css animation انجاد داد.

پیشنهاد این دوره: آموزش کامل زبان برنامه نویسی Css صفر تا هزار می باشد.

منبع: سایت کمپ تاتس

0 دیدگاه برای این محصول ثبت شده است

webdooni
برای ثبت دیدگاه باید شوید.

هادی قربانی این آیتم را پشتیبانی میکند

دارای پشتیبانی

حداقل و حداکثر زمان پاسخگویی 1 الی 2 روز کاری میباشد.

توجه داشته باشید

راه ارتباطی برای پشتیبانی محصولات از طریق سیستم تیکتینگ کمپ تاتس می باشد

مواردی که لازم است بدانید:

  • پاسخگویی به سوالات قبل از خرید در بخش دیدگاهها
  • پاسخگویی به سوالات و مشکلات بعد از خرید از طریق تیکت
  • تنها مواردی که مربوط به محصول خریداری شده است شامل پشتیبانی می باشد
  • ارائه بروزرسانی های رایگان در صورت وجود

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

  • آموزش اختصاصی مباحث.
  • آموزش های جانبی مربوط به دوره خریداری شده.

شرایط و قوانین را حتما مطالعه کنید.

سرفصلی برای این محصول ایجاد نشده است

توسط
توسط
توسط
توسط
توسط