• تنظیم سرعت اینترنت در شبکه
    تنظیم سرعت اینترنت در شبکه

    تنظیم سرعت اینترنت در شبکه شرکتها ، هتلها،کتابخانه ها و ...

    •  ایجاد شناسه کاربری 
    • محدود کردن زمان استفاده از اینترنت
    •   محدود کردن ساعت استفاده از اینترنت
    •  محدود کردن سرعت اینترنت
    •  ایجاد گزارشات برای مدیریت
    • چاپ برگه اکانت اینترنت

    مشاهده...

  • تلفن اینترنتی ویپ
    تلفن اینترنتی ویپ

    لیست قابلیتهای تلفن اینترنتی برای کسب و کار

    • ضبط تماس
    • صف تماس
    • دایورت تماس
    • کنفرانس تماس
    • پاسخگویی خودکار
    •  تعداد نامحدود داخلی

    مشاهده...

  • طراحی وب سایت
    طراحی وب سایت

    قابلیت های قابل ارائه

    • بهینه سازی سئو
    • سرعت بالای سایت
    • انیمیشن در سایت
    • کاستومایز کردن سایت

    مشاهده...

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

تعریف transition در CSS3

transition عامل اصلی در افکت های css3 هست بدون این خاصیت قادر به اجرای هیچ افکتی در CSS نیستیم.

برای ساختن افکت transition دو چیز را باید مشخص کنید:

  1. Selector یا المانی که می خواهید پروپرتی را به آن بدهید.
  2. مدت زمانی که افکت طول می کشد.

نکته: درصورتی که مدت زمان انجام transition مشخص نشده باشد، transition هیچ اثری بر روی آن المان ندارد، زیرا مدت انجام transition به صورت پیشفرض 0 است.

مثال1: یک افکت transition به هر دو خاصیت width و height اضافه شد که به مدت 2 ثانیه برای width و چهار ثانیه برای height طول می کشد .

خاصیت هایtransition :

  1. transition : تمامی خاصیت های transition را در یک خاصیت واحد تنظیم و مقدار دهی می کند.
  2. trtransition-timing-function : این خاصیت نمودار سرعت transition را مشخص می کند. (نحوه و سرعت اجرای انیمیشن را تعریف می کند.) این خاصیت می تواند یکی از مقادیر زیر را داشته باشد:
    • ease: این مقدار باعث می شود transition به آرامی شروع شود و سپس تند شود و در نهایت به آرامی پایان می یابد (حالت پیش فرض خاصیت مورد نظر)
    • Linear: این مقدار باعث می شود که transition با سرعتی یکسان آغاز و پایان یابد.
    • ease-in: این مقدار باعث می شود که transition با سرعتی آرام آغاز شود.
    • ease-out این مقدار باعث می شود که transition با سرعتی آرام پایان یابد.
    • ease-in-out: این مقدار باعث می شود که transition با سرعتی آرام آغاز و پایان یابد.
    • cubic-bezier(n,n,n,n): این مقدار به شما امکان می دهد که مقادیر خود را در تابع cubic-bezier وارد کنید.

    مثال2: نمودارهای سرعت مختلف در transition

  3. transition-delay : مشخص می کند که بعد از چه مدت زمانی transition، شروع شود. مقدار پیشفرض آن 0 است. Div6 در مثال 2 این امر را نشان می دهد.
  4. transition-duration : مدت زمانی که طول می کشد (ثانیه یا هزارم ثانیه) تا transition به اتمام برسد را تعیین می کند.
  5. transition-property : خاصیتی است که در طی پروسه ی انیمیشن در المان از یک مقدار اولیه به مقدار ثانویه تغییر خواهد کرد.
توجه:

می توان خاصیت transition را به صورت مجزا مقدار دهی کرد به صورت زیر:


  div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

  

یا همه ی آنها را با هم و در یک خط تعریف کرد به صورت زیر:


  div {
transition: width 2s linear 1s;
}

  

منابع

https://www.w3schools.com/css/css3_transitions.asp

https://codepen.io/tanhaee/pen/PXYMRY

https://codepen.io/tanhaee/pen/zyOPaK

  • odoo
    Odoo
    “اودوو (odoo) یک نرم افزار مدیریت کسب و کار متن باز و چند منظوره است که عمده نیازهای سازمان‌ها را به صورت یکپارچه برآورده می‌کند.”
  • Testimonials2
    Voip
    “ویپ به معنای “انتقال همزمان مکالمات تلفنی بر روی یک شبکه دیتا” که با نام تلفن اینترنتی از آن یاد می شود،این تکنولوژی امکان استفاده از اینترنت به منظور برقراری مکالمات تلفنی را فراهم می‌نماید.”
  • Testimonials3
    Mikrotik
    “برای مدیریت سرعت در شبکه های اینترنتی احتیاج به سرورهای تقسیم کننده ی اینترنت هست که میکروتیک با کمترین هزینه این کار را انجام می دهد”
Custom

شرکت در یک نگاه

  • راه اندازی شبکه وتنظیم سرعت اینترنت در آن
  • راه اندازی سیستم تلفن اینترنتی ویپ
  • یکپارچه سازی فعالیت های شرکت با نرم افزار های ERP
  • طراحی سایت و کاستومایز کردن آن

مشاهده...