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

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

ساخت انیمیشن با کد های 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

guest
0 نظر
Inline Feedbacks
مشاهده همه نظرات

مطالب مشابه