animation چیست؟

animation

Animation یکی از قابلیت‌های css3 می‌باشد که امکان طراحی جذاب و محرک عناصر صفحه را برای کاربران وب فراهم کرده است.در تعریف animation از کلمه کلیدی @keyframe استفاده می‌شود.در واقع با این پیشوند به مرورگر می‌فهمانیم که در حال تعریف animation هستیم. به مثال زیر توجه نمایید:

مثال :

@keyframe bounce

اینترنت اکسپلورر هنوز از دستور @keyframe    یا خاصیت انیمیشن پشتیبانی نمی‌کند بنابراین برای نمایش صحیح افکت ها; نیاز به نوشتن پیشوند -ms- می‌باشد و سافاری به پیشوند -webkit- و اپرا به پیشوند -o- نیاز دارد.

مثال :

-ms-@keyframe bounce

زمانی که انیمیشن با دستور @keyframe  ایجاد شد ،می بایست از آن در یک تگ استفاده کنیم ، در غیر این صورت انیمیشن مؤثر نخواهد بود.
انیمیشن را حداقل با مشخص کردن این دو خاصیت انیمیشن ، اجرا نمایید:

  • مشخص کردن نام انیمیشن
  • مشخص کردن مدت انیمیشن

مثال:

 

animation: myfirst 5s

 

نکته : شما باید نام و مدت زمان انیمیشن را تعریف کنید. اگر مدت زمان تعریف نشود انیمیشن اجرا نخواهد شد. چون مقدار پیش فرض 0 است.

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

در زمان تعریف keyframes ما می‌توانیم از from برای تعریف شرایط شروع انیمیشن و از to برای شرایط پایان انیمیشن استفاده کنیم، وقتی از from و to استفاده می‌کنیم وابسته به مدت زمان تعیین شده، مرورگر به صورت خودکار زمان را طوری تنظیم می‌کند که از حالت        from  تا حالت to در مدت زمان تعریف شده اجرا شود.
بجای from و to ما می‌توانیم از % نیز استفاده کنیم. مقدار 0% شروع انیمیشن و مقدار 100% پایان انیمشین را تعیین می‌کند.در هنگام استفاده از % ما می‌توانیم مراحل انمیشین را به 100 قسمت تقسیم کنیم، و در هر قسمت کدهای مورد نظرمان را قرار دهیم
 0%
آغاز انیمیشن است و 100% زمانی است که انیمیشن کامل می‎شود.

مثال :

@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


 ردیف  CSS  توضیحات  خاصیت
 1

3

انیمیشن را مشخص می‌کند

@keyframes

 2

3

برای مختصر نویسی ویژگی‎های انیمیشن

animation

 3

3

نام انیمیشن را مشخص می‌کند.

animation-name

 4

3

مشخص می‌کند که یک انیمیشن چند ثانیه یا میلی ثانیه طول می‌کشد تا کامل شود.

animation-duration

 5

3

چگونگی نمایش انیمیشن در طول اجرا را مشخص می‌کند. پیش فرض "ease" است.

animation-timing-function

 6

3

زمان شروع انیمیشن را تعریف می‌کند.پیش فرض 0 است.(مشخص می‌کند که چقدر از نمایش اولیه انیمشین تا شروع اجرای آن تاخیر داشته باشد)

animation-delay

 7

3

تعداد دفعات نمایش انیمیشن را مشخص می‎کند . پیش فرض 1 است

animation-iteration-count

 8

3

 مشخص می‌کند که انیمیشن به صورت معکوس نیز اجرا شود یا نه.پیش فرض "normal" است.

animation-direction

 9

3

مشخص می‌کند که آیا انیمیشن اجرا شود یا متوقف شود . پیش فرض "running" است.

animation-play-state



آخرین بروزرسانی
۱۴ اسفند ۱۴۰۲ 
تعداد کلیک
۳,۱۰۱

فهرست نظرها و ارسال نظر جدید

نام را وارد کنید
ایمیل را وارد کنید
تعداد کاراکتر باقیمانده: 1000
نظر خود را وارد کنید