انیمیشن در css : متحرک سازی و آموزش ساخت انیمیشن در css

انیمیشن در css: انیمیشن و متحرک سازی و آموزش ساخت انیمیشن در css

به حرکت در آمدن اشیا همیشه در وب سایت ها مورد توجه قرار دارد. زمانی که شما به درستی و در زمان مناسب خود از انیمیشن های متحرک استفاده کنید، حتما بازخورد مناسبی خواهد داشت. اینگونه طراحی ها می تواند باعث بهتر کردن ارتباطات میان کاربران با وب سایت شما بشود . در این پست قصد داریم تا در مورد مختصری از مبانی انیمیشن در css صحبت کنیم. با ما باشید تا کد های مربوط به انیمیشن سازی در css را در این پست زیر ذربین کدپز برده و به بحث در این باره بپردازیم.

پیش نیاز

اگر با css آشنایی ندارید مقالات آموزشی مربوط به css را دنبال نمایید.css

همچنین برای اضافه کردن انیمیشن ها در html شما نیاز به آشنایی با محیط html دارید. html

ساختار انیمیشن در css

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

-Keyframes

-Animation Properties

Keyframes

پایه ی قوانین انیمیشن در css مربوط به keyframes@ ها میشود. این keyframes@ ها هستند که تعریف میکنند انیمیشن ها در هر مرحله از زمان به چه شکلی باشند. هر keyframes@ تشکیل شده است از :

 نام انیمیشن : نامی دلخواه برای توصیف انیمیشن

مراحل انیمیشن : هر مرحله از انیمیشن به صورت یک درصد نمایش داده می شود. 0٪ نشان دهنده وضعیت اولیه انیمیشن است. 100٪ نشان دهنده وضعیت پایانی انیمیشن است. همچنین چندین حالت میانی می تواند در میان اضافه شود.

خواص CSS : خواص css برای هر مرحله از جدول زمانی انیمیشن تعریف شده است.

حال نگاهی به keyframes@ ساده ایی که بنده به اسم codepazanimate ذخیره کرده ام، می اندازیم. این keyframes@ سه مرحله دارد.

در مرحله اول ( 0 % ) : اِلمان در  0 درصد و تا 10 درصد از اندازه پیش‌فرض خود , با استفاده از مقیاس تبدیل css به 10 درصد رسیده‌است . ” (scale(0.1 ”

در مرحله دوم ( 60 % ) : اِلمان با opacity کامل محو می‌شود و تا 120 درصد از اندازه پیش‌فرض خود رشد می‌کند. ” (scale(1.2 ”

در مرحله آخر ( 100 % ) : کمی کاهش می‌یابد و به اندازه پیش‌فرض خود بازمی گردد. ” (scale(1 ”

این keyframes@ به فایل اصلی css شما اضافی می شود.

حال اگر شما با transform های css آشناییت ندارید و میخواهید از این خصوصیت در انیمیشن های خود بهره ببرید، از این صفحه استفاده ی لازم را ببرید. transform

Animation Properties

پس از تعریف keyframes@ ، ویژگی های انیمیشن باید اضافه شوند تا انیمیشن شما کار کند. ویژگی های انیمیشن دو چیز را انجام می دهد:

1. آنها keyframes@ ها را به اِلمان هایی که میخواهید تحریک کنید، اختصاص می دهد.
2. چگونگی متحرک شدن انیمیشن ها را تعیین میکنند.

توجه داشته باشید که برای به اجرا درآمدن انیمیشن خود باید دو خط زیر اعمال نمایید.

-animation-name : نام انیمیشن می باشد که در keyframes@ تعیین شده است.

-animation-duration : در این قسمت نیز زمان به اجرا در آمدن انیمیشن مشخص خواهد شد.

در ادامه قطعه کدی را میبینید که پیش از این keyframes@ مربوط به آن را با اسم codepazanimate نوشته بودیم.

و یا به طور کوتاه تر می توان به صورت زیر نوشت.

با اضافه کردن هر دو keyframes  و ویژگی های انیمیشن موفق به ساخت و تکمیل انیمیشن شدید.

با کدپز همراه شوید تا بیشتر بر روی این موضوع متمرکز شویم. همچنین طبق روال گذشته دو تا از سایت های کاربردی در این زمینه برای شما آماده کرده ایم. پس برای اطلاعات بیشتر سری به سایت های w3schools و یا daneden.github بزنید.