ساخت انیمیشن با کد های css

امروز قصد آموزش ساخت انیمیشن با ساده ترین روش ممکن را به شما آموزش خواهیم داد . بدون مقدمه میریم سر آموزش :

ساخت انیمیشن با کد های css :

حالت کلی کد نویسی و ساخت المان های انیمیشنی بصورت زیر میباشد

@-webkit-keyframes A4fran3 {
دستورات ما

}
@-moz-keyframes A4Fran3 {
دستورات ما

}

ما نام انیمیشن را a4fran3 قرار داده ایم که میتوانید آن را تغییر دهید

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

@-webkit-keyframes a4fran3 {
۰% {background-color:#ff0;}
۵۰% {background-color:#FFf;}
۱۰۰% {background-color:#ff0;}
}
@-moz-keyframes a4fran3 {
۰% {background-color:#ff0;}
۵۰% {background-color:#FFf;}
۱۰۰% {background-color:#ff0;}
}

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

حالا کافیست مقدار زمان تغییرات را اعمال نماییم . در کد زیر سرعت این تغییرات را بر روی 5 ثانیه تنظیم میکنیم که کل اتفاق های بالا در طول 5 ثانیه انجام شود

.a4fran3-class {
animation: a4fran3 5s;
-webkit-animation: a4fran3 5s;
-moz-animation: a4fran3 5s;
}

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

خب اکنون آموزش دیگری در این رابطه به شما خواهیم داد.

خب قاعده کلی انیمیشن را کد زیر در نظر میگیریم:

@keyframes a4fran3 {
۰% {کد های استایل;}
۵۰% {کد های استایل;}
۱۰۰% {کد های استایل;}
}

در کد بالا کافیست بجای “کد های استایل ” کد های CSS خود را جایگزین نماییم . به کد زیر دقت کنید :

@keyframes a4fran3 {
۰% {background: black;}
۵۰% {background: green;}
۱۰۰% {background: red;}
}

خب طبق معمول کد بالا باید برای تمام مرورگر ها نوشته شود تا در مرورگر ها دچار مشکل نشویم . بدین ترتیب از کد های زیر استفاده میکنیم :

@keyframes a4fran3 {
۰% {background: black;}
۵۰% {background: green;}
۱۰۰% {background: red;}
}
@-moz-keyframes a4fran3 {
۰% {background: black;}
۵۰% {background: green;}
۱۰۰% {background: red;}
}
@-webkit-keyframes a4fran3 {
۰% {background: black;}
۵۰% {background: green;}
۱۰۰% {background: red;}
}

خب بعد نوشتن کد های بالا ، باید کد Animation را به کلاس خود اضافه کنیم:

.myclass {
animation:animname 3s infinite;
}

خب در کد بالا بجای myclass نام کلاس را بنویسید . اما برای درک بیشتر از کد های animation آموزش زیر را ببینید :

کد Animaion در حالت کلی بصورت زیر میباشد:

animation: name duration timing-function delay iteration-count direction play-state;

– animation-name: نامی است که در keyframe برای انیمیشن انتخاب کردیم. (مثال: a4fran3)

– animation-duration: زمان انجام کل انیمیشن از اول تا انتها بر حسب ثانیه (مثال: ۵s)

– animation-timing-function: مشخص کننده منحنی سرعت (اوج و فرود سرعت در طول حرکت)
این خاصیت شامل چندین گزینه است:
Leaner: سرعت یکسان از ابتدا تا انتها
Ease: با سرهت کم شروع میشود سپس بلافاصله سرعت آن زیاد شده و در پایان مجدد کاهش میابد.
Ease-in: با سرعت کم شروع میشود و سرعت زیاد میشود.
Ease-out: با سرعت زیاد شروع شده و کم میشود.
مقدار پیش فرض در انیمشین خاصیت ease است.

– animation-delay: این خاصیت مقدار زمان انتظار قبل از شروع انیمیشن را تنظیم میکند. (مثال: ۳s)

– animation-iteration-count: تعداد دقعات تکرار انیمیشن که در حالت کلی بی نهایت بار تکرار میشود (مثال: ۳ یا infinite)

– animation-direction: این مقدار بیانگر جهت انجام انیمیشن است:
این خاصیت شامل چندین گزینه است:
Normal: انیمیشن از ابتدا به انتها به صورت معمولی انجام میشود.
Reverse: انیمیشن به صورت برعکس انجام میشود.
Alternate: انیمیشن در هر مرحل به صورت بر عکس مرحله قبل انجام میشود (رفت و برگشت)
Alternate-reverse: برعکس حالت قبل است. یعنی ابتدا برعکس انجام شده و سپس ادامه انیمیشن

– animation-play-state: با این گزینه میتوانید انیمیشن را فعال یا متوقف کنید (میتوانید با استفاده از دستورات جاوا به سادگی این امکان را برای کاربر فراهم کنید):
Paused: متوقف
Running: اجرا

یک مثال کلی از تمام توضیحات بالا برای شما میزنیم :

animation: mydesign 5s leaner 2s 3 reverse running;

موفق و پیروز باشید

لینک کوتاه:

https://a4fran3.ir/?p=16474