انیمیشن صاف اشیا فقط با استفاده از CSS (5 مثال).

و بس! بیایید ببینیم در واقعیت چگونه به نظر می رسد.

ابتدا نشانه گذاری HTML. بسیار ساده است زیرا ما فقط با یک عنصر در هر صفحه کار می کنیم.

1	<div class = "toSmallWidth">

و این چیزی است که در شیوه نامه وجود دارد:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.toSmallWidth (حاشیه: 20 پیکسل خودکار؛ / * 20 پیکسل لایه بالا و پایین و تراز وسط * /پس زمینه: قرمز؛ / * پس زمینه قرمز بلوک * /ارتفاع: 100 پیکسل؛ / * ارتفاع بلوک 100 پیکسل * /عرض: 800 پیکسل؛ / * عرض اولیه 800 پیکسل * /-webkit-animation-name: animWidthSitehere. -webkit-انیمیشن مدت زمان: 5 ثانیه. / * دارای پیشوند برای مرورگرهای کروم، سافاری، اپرا * /انیمیشن-نام: animWidthSitehere; / * نام فریم های کلیدی (واقع در زیر) را مشخص کنید * /انیمیشن-مدت: 5 ثانیه; / * تنظیم مدت زمان انیمیشن * / } / * فریم های کلیدی با پیشوند برای مرورگرهای کروم، سافاری، اپرا * / @ -webkit-keyframes animWidthSitehere (از (عرض: 800 پیکسل؛) تا (عرض: 100 پیکسل؛)) @keyframes animWidthSitehere (از (عرض: 800 پیکسل؛) / * اولین فریم کلیدی که عرض بلوک 800 پیکسل است * /به (عرض: 100 پیکسل؛) / * آخرین فریم کلیدی که عرض بلوک 100 پیکسل است * / }

همانطور که می بینید، ما فقط اولین و آخرین فریم های کلیدی را مشخص کردیم و تمام فریم های میانی به طور خودکار "ساخت" شدند.

اولین انیمیشن CSS3 شما آماده است. برای ادغام دانش به دست آمده، یک سند HTML و یک فایل CSS ایجاد کنید و کد مثال را در آنجا وارد کنید (یا بهتر است با دست تایپ کنید). سپس مطمئناً همه چیز را خواهید فهمید. سپس سعی کنید همین کار را با ارتفاع بلوک انجام دهید (ارتفاع آن باید کاهش یابد) تا مواد محکم شود.

3. نمونه هایی از انیمیشن های CSS3 پیچیده تر هستند

در بالا، یاد گرفتید که ساخت انیمیشن های CSS3 چقدر آسان است. اگر سعی کردید این کار را با دستان خود انجام دهید، قبلاً کل فرآیند را درک کرده اید و اکنون می خواهید بدانید که چگونه می توانید یک انیمیشن پیچیده تر و زیباتر ایجاد کنید. و واقعاً امکان ایجاد آن وجود دارد. در زیر 3 درس وجود دارد که در آنها انیمیشن به همان روشی که در مثال بالا ایجاد شده است وجود دارد.

3 آموزش انیمیشن CSS (تبدیل)

این آموزش ها به شما کمک می کند انیمیشن CSS را حتی بهتر درک کنید. نکته اصلی این است که سعی کنید آنچه را که در درس می بینید تکرار کنید. یا حداقل سعی کنید مقادیر ویژگی ها را تغییر دهید و ببینید چه اتفاقی می افتد، در این صورت از CSS کمتر می ترسید.

ما اخیراً آن را دیدیم انتقالفقط یک راه است تصاوير متحركویژگی های سبک از اصلیقبل از آخرینایالت ها.

بنابراین انتقال در CSS است خاصبر اساس نوع انیمیشن، جایی که:

• فقط دو حالت وجود دارد: آغاز و پایان.
• انیمیشن حلقه نشده است.
• حالت های میانی فقط توسط تابع زمان کنترل می شوند.

اما اگر بخواهید چه می کنید:

• کنترل داشته باشند حد واسطایالت ها؟
• حلقه زدنانیمیشن؟
• ساخت انواع انیمیشن برای یکیمورد؟
• متحرک سازی یک ویژگی خاص فقط در نیمی ازراه
• تقلید کنید توابع مختلف زمانیبرای خواص مختلف؟

انیمیشن در CSS همه اینها و بیشتر را امکان پذیر می کند.

انیمیشن مانند یک مینی فیلم است که در آن شما به عنوان کارگردان، دستورالعمل هایی (قوانین سبک) به بازیگران خود (عناصر HTML) برای صحنه های مختلف (کی فریم) می دهید.

ویژگی های انیمیشن

مانند انتقال، ویژگی انیمیشن است به اختصاربرای چند نفر دیگر:

• animation-name: نام انیمیشن;
• انیمیشن-دوره: مدت زمان انیمیشن چقدر است.
• animation-timing-function: حالت های میانی چگونه محاسبه می شوند.
• animation-delay: انیمیشن بعد از مدتی شروع می شود.
• animation-iteration-count: انیمیشن چند بار باید اجرا شود.
• animation-direction: آیا حرکت باید در جهت مخالف باشد یا خیر.
• animation-fill-mode: چه سبک هایی قبل از شروع انیمیشن و بعد از پایان آن اعمال می شود.

مثال سریع

برای متحرک سازی دکمه دانلود، می توانید یک انیمیشن بنویسید جهنده:

@keyframes bouncing (0% (پایین: 0؛ box-shadow: 0 0 5px rgba (0,0,0,0.5)؛) 100% (پایین: 50px؛ box-shadow: 0 50px 50px rgba (0,0, 0,0.1))) .loading-button (انیمیشن: پرش 0.5 ثانیه مکعب بیزیر (0.1،0.25،0.1،1) 0s بی نهایت متناوب هر دو؛)

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

من استفاده کردم به اختصارویژگی انیمیشن و شامل تمام گزینه های ممکن:

• animation-name: bouncing (با نام فریم های کلیدی مطابقت دارد)
• مدت زمان انیمیشن: 0.5 ثانیه (نیم ثانیه)
• عملکرد-زمان بندی انیمیشن: مکعب بیزیر (0.1،0.25،0.1،1)
• انیمیشن-تاخیر: 0 ثانیه (بدون تاخیر)
• انیمیشن-تکرار-تعداد: بی نهایت (بی نهایت قابل پخش)
• انیمیشن- جهت: متناوب (به جلو و عقب می رود)
• animation-fill-mode: هر دو

@keyframes

قبل از متحرک سازی عناصر HTML، شما نیاز دارید با استفاده از فریم های کلیدی انیمیشن بنویسید... به طور کلی، کی فریم ها همه هستند مرحله میانیدر انیمیشن آنها با استفاده از درصد تعیین می شوند:

• 0% - مرحله اول انیمیشن.
• 50% یک قدم نیمه راه در انیمیشن است.
• 100% آخرین مرحله است.

همچنین می توانید به ترتیب به جای 0% و 100% از کلمات کلیدی از و به استفاده کنید.

شما می توانید به تعداد دلخواه فریم های کلیدی مانند 33%، 4% یا حتی 29.86% تعریف کنید. در عمل فقط تعدادی از آنها را می نویسید.

هر فریم کلیدی است قانون CSS، به این معنی است که شما می توانید ویژگی های CSS را طبق معمول بنویسید.

برای تعریف انیمیشن کافیست کلمه کلیدی @keyframes را با آن بنویسید عنوان:

@keyframes در اطراف (0% (چپ: 0؛ بالا: 0؛) 25% (چپ: 240 پیکسل؛ بالا: 0؛) 50% (چپ: 240 پیکسل؛ بالا: 140 پیکسل؛) 75% (چپ: 0؛ بالا: 140 پیکسل ;) 100% (سمت چپ: 0؛ بالا: 0؛)) p (انیمیشن: حدود 4 ثانیه خطی بی نهایت؛)

توجه داشته باشید که شروع 0٪ و پایان 100٪ شامل همان قوانین CSS. این اطمینان حاصل می کند که انیمیشن به طور کامل حلقه می شود. از آنجایی که شمارشگر تکرار روی بی نهایت تنظیم شده است، انیمیشن از 0٪ به 100٪ می رود و سپس بلافاصله بازگشتبه 0٪ و به همین ترتیب برای همیشه.

نام انیمیشن

نامحداقل از انیمیشن استفاده می شود دو برابر:

• در نوشتنانیمیشن با @keframes;
• در استفاده كردنانیمیشن‌هایی که از ویژگی animation-name (یا ویژگی انیمیشن کوتاه‌نویسی) استفاده می‌کنند.

@keyframes whatever (/ * ... * /) .selector (animation-name: whatever;)

مانند نام کلاس های CSS، نام انیمیشن ها فقط می تواند شامل موارد زیر باشد:

• حروف (a-z)؛
• اعداد (0-9)؛
• زیر خط (_)؛
• خط ربط (-).

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

انیمیشن-مدت

مانند مدت زمان انتقال، مدت زمان انیمیشن را می توان روی آن تنظیم کرد ثانیه(1s) یا میلی ثانیه(200 میلی ثانیه).

انتخابگر (انیمیشن-مدت زمان: 0.5 ثانیه؛)

پیش‌فرض 0s است، به این معنی که اصلاً انیمیشن وجود ندارد.

انیمیشن-زمان-تابع

مشابه توابع زمان‌بندی برای انتقال، از توابع زمان‌بندی برای انیمیشن نیز می‌توان استفاده کرد کلید واژه هامانند خطی، آسان، یا می توان با دلخواه تعریف کرد منحنی های Bezier.

انتخابگر (انیمیشن-زمان-عملکرد: ease-in-out؛)

پیش فرض آسان است.

از آنجایی که انیمیشن های CSS از فریم های کلیدی استفاده می کنند، می توانید تنظیم کنید خطیتابع زمان و شبیه سازی کنیدمنحنی بزیر خاص با تعریف بسیاری بسیار خاصفریم های کلیدی برای انیمیشن های پیشرفته به Bounce.js نگاهی بیندازید.

انیمیشن-تاخیر

همانند تأخیر انتقال، تأخیر انیمیشن را می توان روی آن تنظیم کرد ثانیه(1s) یا میلی ثانیه(200 میلی ثانیه).

پیش فرض 0s است، به این معنی که هیچ تاخیری وجود ندارد.

زمانی مفید است که چندین انیمیشن در آن گنجانده شود سلسله.

A، .b، .c (انیمیشن: 1 ثانیه پرش؛) .b (تاخیر انیمیشن: 0.25 ثانیه؛) .c (تاخیر انیمیشن: 0.5 ثانیه؛)

انیمیشن-تکرار-تعداد

به طور پیش فرض، انیمیشن فقط پخش می شود یک بار(مقدار 1). شما می توانید سه نوع مقدار تنظیم کنید:

• اعداد کامل، مانند 2 یا 3؛
• اعداد کسری مانند 0.5 که فقط نیمی از انیمیشن را پخش می کنند.
• کلمه کلیدی بی نهایت، که انیمیشن را به طور نامحدود تکرار می کند.

.selector (انیمیشن-تکرار-تعداد: بی نهایت؛)

انیمیشن- جهت

ویژگی animation-direction تعیین می کند به چه ترتیبیفریم های کلیدی خوانده می شوند.

• عادی: از 0 شروع می شود، در 100 به پایان می رسد، دوباره از 0٪ شروع می شود.
• معکوس: از 100٪ شروع می شود، در 0 به پایان می رسد، دوباره از 100٪ شروع می شود.
• جایگزین: از 0 شروع می شود، به 100 می رود، به 0 برمی گردد.
• جایگزین-معکوس: از 100% شروع می شود، به 0 می رود، به 100% برمی گردد.

اگر تعداد تکرار انیمیشن روی بی نهایت تنظیم شود، تصور این آسان تر است.

انیمیشن-پر-حالت

ویژگی animation-fill-mode تعیین می کند که چه اتفاقی می افتد جلوشروع انیمیشن و بعد ازتکمیل آن

در تعیین پرسنل کلیدیمی توانید مشخص کنید قوانین CSSکه در مراحل مختلف انیمیشن اعمال خواهد شد. اکنون این قوانین CSS می توانند برخوردبا کسانی که قبلا اعمال شده استبه عناصر متحرک

animation-fill-mode به شما امکان می دهد به مرورگر بگویید که آیا سبک های انیمیشن همچنینباید اعمال شود خارج از انیمیشن.

بیایید تصور کنیم دکمه، که عبارت است از:

• قرمزپیش فرض
• تبدیل می شود آبیدر ابتدای انیمیشن؛
• و در پایان سبزوقتی انیمیشن کامل شد

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

همانطور که می بینید، یک ویژگی در اینجا وجود دارد : شناورکه سبک پس‌زمینه را در شناور تغییر می‌دهد، در برخی نمونه‌ها باید مورد نیاز باشد.

تغییر رنگ یکنواخت عنصر در شناور با انتقال

# جعبه 1 (
margin-bottom: 5px;
پس زمینه رنگ: #ccc;

بالشتک: 10 پیکسل؛
text-align: center;
عرض: 200 پیکسل؛
ارتفاع: 100 پیکسل؛

text-indent: 0px;
حاشیه: 1px جامد # 888;
-moz-transition: پس زمینه رنگ 0.8s 0.1s سهولت.
-o-transition: پس زمینه رنگ 0.8s 0.1s سهولت.
-webkit-transition: پس زمینه رنگ 0.8s 0.1s سهولت.
مکان نما: اشاره گر؛)

# جعبه 1 : شناور {
پس زمینه رنگ: # 97CE68;
رنگ: # 333;
}

همانطور که می بینید، ما با استفاده از ویژگی به این انیمیشن دست یافتیم انتقال... در اینجا می توانید سرعت انیمیشن را در چند ثانیه تغییر دهید، در این حالت 0.8 ثانیه تا زمانی که رنگ به طور کامل در حالت شناور تغییر کند و 0.1 ثانیه قبل از شروع انیمیشن پس از شناور کردن و دور کردن مکان نما هزینه دارد. (با عرض پوزش برای معما :-)) این مقدار را می توان در صورت نیاز تغییر داد.

رنگ پس زمینه در شناور به عنوان یک ویژگی تنظیم می شود : شناور، در اینجا لازم است، در غیر این صورت انیمیشن کار نخواهد کرد.

تغییر اندازه یک عنصر

# جعبه 2 (
margin-bottom: 5px;
پس زمینه رنگ: #ccc;
رنگ: # 333;

بالشتک: 10 پیکسل؛
text-align: center;
عرض: 200 پیکسل؛
ارتفاع: 100 پیکسل؛

text-indent: 0px;
حاشیه: 1px جامد # 888;
-moz-transition: همه 1 ها خطی.
-o-transition: همه 1 ها خطی.
-webkit-transition: all 1s linear;
مکان نما: اشاره گر؛)

# جعبه 2 : شناور {
پس زمینه رنگ: # 97CE68;
رنگ: # 000;
عرض: 150 پیکسل؛
ارتفاع: 50 پیکسل؛
}

در این مثال، ما به تغییر اندازه بلوک در حالت شناور دست یافته ایم. قدر استاندارد 200x100 و قدر شناور 150x50 است که با ویژگی مشخص می شود. : شناور.

در اینجا شما همچنین می توانید بلوک را فقط در عرض یا ارتفاع تغییر دهید، فقط لازم است : شناورحذف عرض:- بلوک فقط در ارتفاع تغییر می کند، ارتفاع:- بلوک فقط در عرض تغییر می کند.

شما همچنین می توانید نرخ تغییر را تغییر دهید. در این حالت 1s است.

پیچاندن جسم

# جعبه 3 (
margin-bottom: 5px;
پس زمینه رنگ: #ccc;
رنگ: # 333;

بالشتک: 10 پیکسل؛
text-align: center;
عرض: 200 پیکسل؛
ارتفاع: 100 پیکسل؛

text-indent: 0px;
حاشیه: 1px جامد # 888;
-moz-transition: همه 1s 0.1s ease-in.
-o-transition: همه 1s 0.1s ease-in.
-webkit-transition: همه 1s 0.1s ease-in.
مکان نما: اشاره گر؛)

# جعبه 3: شناور (
پس زمینه رنگ: # 97CE68;
رنگ: # 000;
-webkit-transform: چرخش (360 درجه)؛
-moz-transform: چرخش (360 درجه)؛
-o-transform: چرخش (360 درجه)؛
}

پیچش با استفاده از رخ می دهد تبدیلو انتقال... در این حالت جسم در جهت عقربه های ساعت با سرعت یک ثانیه 360 درجه می چرخد. اگر می خواهید بلوک در خلاف جهت عقربه های ساعت بچرخد، تبدیلمقدار باید قرار داده شود - (منهای). طبیعتاً درجه چرخش قابل تغییر است.

به آرامی روی یک شی بزرگنمایی و کوچکنمایی کنید

# جعبه 4 (
margin-bottom: 5px;
پس زمینه رنگ: #ccc;
رنگ: # 333;
بالشتک: 10 پیکسل؛
text-align: center;
عرض: 200 پیکسل؛
ارتفاع: 100 پیکسل؛

text-indent: 0px;
حاشیه: 1px جامد # 888;
-moz-transition: همه 3s ease-out.
-o-transition: همه 3 ها ease-out.
-webkit-transition: همه 3s ease-out.
مکان نما: اشاره گر؛)

کادر #4: شناور (
پس زمینه رنگ: # 97CE68;
رنگ: # 000;
-webkit-transform: scale (2);
-moz-transform: مقیاس (2);
-o-transform: مقیاس (2);
}

در این مثال، بلوک به آرامی دو برابر شده است. این مقدار در معرض دید قرار می گیرد تبدیل: مقیاس (2)... اگر مقدار را به ترتیب روی 1.5 قرار دهید، افزایش بلوک 1.5 برابر خواهد شد.

به همین ترتیب، شما می توانید کاهش اندازهبلوک، برای مثال، مقدار 0.5 را قرار دهید.

جابجایی بلوک صاف به پایین

# جعبه 5 (
margin-bottom: 5px;
پس زمینه رنگ: #ccc;
رنگ: # 333;
بالشتک: 10 پیکسل؛
text-align: center;
عرض: 200 پیکسل؛
ارتفاع: 100 پیکسل؛

text-indent: 0px;
حاشیه: 1px جامد # 888;
-moz-transition: همه 1 ها ease-in-out.
-o-transition: همه 1ها ease-in-out.
-webkit-transition: همه 1 ها ease-in-out.
مکان نما: اشاره گر؛)

# جعبه 5: شناور (
پس زمینه رنگ: # 97CE68;
رنگ: # 000;
-webkit-transform: translate (0.50px)؛
-moz-transform: translate (0.50px)؛
-o-transform: translate (0.50px)؛
}

در اینجا حرکت بر حسب پیکسل داده می شود. در این مورد (0.50 پیکسل). همچنین می توانید بلوک را با این مقدار 0، -50 پیکسل به سمت بالا حرکت دهید. یا به صورت مورب به سمت پایین 50 پیکسل، 50 پیکسل. در یک کلام، بلوک را می توان برای حرکت در هر جایی ساخت.

این اساساً تمام چیزی است که می خواستم بگویم. نه، نه همه :-) فراموش کردم به شما یادآوری کنم که این انیمیشن CSS را می توان برای هر شی در سایت اعمال کرد: تصاویر، متن، عنوان، نمادها و غیره. برای لینک ها تغییر رنگ صاف عالیه به نظر من خیلی قشنگه. :-)

و با این حال، این اطلاعات توسط سایت shpargalkablog.ru با ما به اشتراک گذاشته شد. که با تشکر فراوان از او.

حالا همه چیز قطعی است :-) دوستان به زودی شما را می بینیم.

سلام به همه اخیراً با یک سری فیلم آموزشی بسیار مفید و جالب در مورد موضوع " انیمیشن CSS". اما این بدشانسی است، همه ویدیوها به زبان انگلیسی بودند و احتمالاً هر طراح صفحه‌آرایی انگلیسی را در سطح کافی برای درک و جذب تمام اطلاعات لازم نمی‌داند. بنابراین، تصمیم گرفتم این دروس را برای شما ترجمه کنم (یا بهتر است بگویم، یک ترجمه رایگان انجام دهم). نیازی به تشکر نیست. بنابراین:

1. انیمیشن CSS ویژگی مقدمه + انتقال(این مقاله)
2. انیمیشن CSS Keyframes - به زودی
3. چه زمانی و چرا از انیمیشن های CSS استفاده کنیم؟ - به زودی خواهد شد

انیمیشن CSS چیست؟

قبل از اینکه به شما بگویم چگونه انیمیشن های CSS بسازید و چرا اصلاً به آنها نیاز دارید، ابتدا می خواهم برای شما توضیح دهم. چه اتفاقی افتاده استانیمیشن CSS، تعریف یا چیز دیگری بدهید.

انیمیشن در وب دو ایده اصلی دارد. ایده اول این است چیزی را احیا کن... شما مثل دکتر فرانکنشتاین هستید. شما یک هیولای بی جان دارید و در آن جان می دهید. دوم این است تجسم حرکت... و کلمه کلیدی در اینجا "حرکت" است.

چگونه متحرک سازی کنیم؟

دو ابزار اصلی در CSS وجود دارد که می توانیم از آنها برای جابجایی عناصر در یک صفحه وب استفاده کنیم. اولین مورد (که امروز بعداً در مورد آن صحبت خواهیم کرد) ملک است انتقال... اول از همه، با کمک آن است که ما انیمیشن ها را در CSS ایجاد می کنیم. ابزار دوم ملک است انیمیشن جفت شده با فریم های کلیدی(@keyframes - keyframes). در آموزش بعدی این ابزار را با جزئیات بیشتری بررسی خواهیم کرد، اما در حال حاضر نگاهی به ویژگی انتقال CSS خواهیم داشت. و سپس در مورد آنچه که در صفحه باید متحرک شود (زمانی که کاربر به آن نیاز دارد) و چه چیزی نباید متحرک شود (زمانی که انیمیشن احمقانه و نامناسب به نظر می رسد) بر اساس تجربه کاربر (UX) صحبت خواهیم کرد.

ویژگی انتقال CSS - پارامترها و مقادیر

نحو

ابتدا، بیایید نگاهی به نحوه خواندن این ویژگی و تجزیه نحو آن بیندازیم. این ویژگی را به این صورت می نویسیم:

انتقال: [ویژگی] [مدت زمان] [تابع زمان بندی] [تاخیر انداختن] ;

انتقال: ارتفاع 1s ease-out 0.2s;

این ویژگی را به عنصری که می خواهیم متحرک کنیم، اختصاص می دهیم. این عنصر صاف می شود انتقال(یا گام به گام) بین چند حالت آن (مثلاً ارتفاع 100 پیکسل و ارتفاع 200 پیکسل). و این چگونه به نظر می رسد انتقال(از انتقال انگلیسی)، به پارامترهایی که به آن می دهیم بستگی دارد.

اولین پارامتر (مقدار) ویژگی transition دیگری است ویژگیعنصر متحرک (به عنوان مثال، ارتفاع).

پارامتر دوم مدت زمان (مدت) انیمیشن است، یعنی چقدر طول می کشد تا یک عنصر از حالتی به حالت دیگر (مثلاً 2 ثانیه یا 2000 میلی ثانیه) منتقل شود.

پارامتر سوم است تابع زمان بندی [زمان سنجیعملکرد] (تابع بودن [ تسهیلعملکرد]). چگونه شدت انیمیشن در طول زمان توزیع می شود. به عنوان مثال، یک انیمیشن ممکن است به طور ناگهانی شروع شود، سپس کند شود و به آرامی انتقال را به پایان برساند. می تواند به عنوان کلمات کلیدی استفاده شود (به عنوان مثال، سهولت،سهولت-که در-بیرون،خطی) و توابع مکعب Bezier (به عنوان مثال، مکعب-bezier (0.17، 0.67، 0.83، 0.67)). می توانید به راحتی و به راحتی مکعب Bezier را در این منبع http://cubic-bezier.com و همچنین عملکرد مراحل را به منظور ایجاد انیمیشن فریم به فریم (گام به گام) سفارشی کنید.

و در نهایت پارامتر تاخیر انداختن... تأخیر انیمیشن مدت زمانی است که باید قبل از شروع انیمیشن (در مورد ما، انتقال) منتظر بمانید.

نمونه انیمیشن انتقال CSS

بیایید نگاهی به این مثال از انیمیشن CSS بیندازیم:

انتقال: کدورت 300 میلی ثانیه ease-in-out 1s;

در اینجا ما فقط ویژگی را متحرک می کنیم کدورت(کدری). این بدان معناست که اگر عنصری که قرار است متحرک سازی کنیم دارای ویژگی های دیگری مانند ارتفاع، عرض یا رنگ باشد و حتی اگر این ویژگی ها در حالت های مختلف عنصر متفاوت باشد، تنها خاصیت opacity یک انتقال صاف خواهد داشت (انیمیشن) ). آیا می فهمی؟

به جای یک ویژگی خاص، می توانید از کلمه کلیدی “ همه". این بدان معنی است که ما مطلقاً تمام خصوصیات عنصری را که در حالت جدید عنصر تغییر کرده اند (نه فقط کدورت) و اصلاً قابل انیمیشن هستند را متحرک خواهیم کرد. زیرا همانطور که می دانید همه ویژگی ها را نمی توان متحرک کرد. اما در ادامه بیشتر در مورد آن.

پارامتر دوم ( 300 اماس) به ما می گوید که انیمیشن فقط 300 میلی ثانیه دوام می آورد. یعنی عنصر به سرعت یا به سرعت حل می شود، بسته به مقادیر ویژگی ها در دو حالت آن.

تابع زمان بندی ( سهولت-که در-بیرون) سومین پارامتر شروع و پایان انیمیشن را هموارتر می کند.

تاخیر انداختن ( 1 س) نشان می دهد که انیمیشن قبل از شروع به کار چقدر باید دیر باشد.

به طور کلی، این فرمول نحوه نوشتن انیمیشن انتقال است. این نحو است. شما، در صورت هر چیزی، می توانید بیش از یک انتقال [خواص] برای یک عنصر اضافه کنید. به عنوان مثال، می توانید ارتفاع و عرض یک عنصر را با پارامترهای مختلف متحرک کنید. برای این کار در ویژگی transition به جای نقطه ویرگول در انتها کافیست یک کاما قرار دهید و برای یک ویژگی دیگر پارامتر بنویسید. و فراموش نکنید که بعد از آن یک نقطه ویرگول در پایان قرار دهید تا کار کند.

چه چیزی را می توان در CSS متحرک کرد؟

تا اینجا ما فقط در مورد نحو ویژگی transition بحث کرده ایم. حالا بیایید در مورد ویژگی ها صحبت کنیم که کدام یک را می توانیم متحرک کنیم و کدام را نمی توانیم. زیرا برخی چیزها وجود دارند که متحرک سازی آنها منطقی نیست، و برخی از ویژگی ها به سادگی غیر ممکن است.

خواص متحرک

به عنوان مثال، ویژگی هایی مانند:

1. اندازه فونت؛
2. رنگ پس زمینه؛
3. عرض؛
4. سمت چپ (چقدر می توان عنصر را از سمت چپ حرکت داد [موقعیت] ...

بدیهی است که متحرک سازی این ویژگی ها منطقی است. اگر مقادیر آنها را تغییر دهید، عنصر را به صورت بصری تغییر می دهد. اگر اندازه فونت را از مثلاً 14 به 28 پیکسل تغییر دهید، فونت را به آرامی افزایش می دهید، یک انیمیشن وجود داشت که مدتی طول کشید. اگر مقادیر ویژگی ها مقادیر واضح (اغلب عددی) باشند، انیمیشن همیشه منطقی است. اگر اندازه فونت را به 100 پیکسل افزایش دهید، به وضوح می توانید بزرگ شدن حروف را مشاهده کنید. تغییر رنگ صاف پس زمینه را نیز می توان مشاهده کرد [زیرا رنگ روی وب دارای یک کد عددی است، به عنوان مثال، قرمز rgb (255,0,0)]. این ویژگی ها قابل زنده شدن هستند.

به طور کلی، به یاد داشته باشید، اگر تصور کنید که در حال انیمیشن است، پس می توان آن را متحرک کرد. بیشتر اوقات کار می کند.

خواص غیرقابل زنده بودن

و در اینجا لیستی از ویژگی هایی است که نمی توان آنها را متحرک کرد (مثال):

1. نمایش دادن؛
2. font-family;
3. موقعیت ...

اینها برخی از آنها هستند که من به عنوان مثال در نظر گرفتم تا بتوانید تفاوت بین خصوصیات CSS متحرک و غیر متحرک را درک کنید.

بیایید نمایش دهیم. می توانید تصور کنید که چگونه تغییر بین " نمایش دادن:مسدود کردن؛ "و " نمایش دادن:درون خطی-مسدود کردن؛"؟ چگونه ظاهر یک عنصر می تواند به آرامی بین " موقعیت:نسبت فامیلی؛"و" موقعیت:مطلق؛"؟ خیر، البته، وقتی این ویژگی ها تغییر کنند، عنصر متفاوت به نظر می رسد. اما چگونه می توانید تصور کنید انتقال? شما نمی توانید این کار را انجام دهید. درست؟ شما نمی توانید تغییر فونت را تصور کنید هلوتیکادر فونت گرجستان، هر حرفی، کار نمی کند. شما می توانید این فونت ها را تغییر دهید، اما آنها به طور ناگهانی تغییر می کنند، هیچ انیمیشنی اتفاق نمی افتد.

عملکرد انیمیشن در CSS

به طور کلی، بسیاری از ویژگی ها متحرک هستند، اما برخی از آنها اینطور نیستند. حال بیایید تصمیم بگیریم که کدام یک از ویژگی های متحرک برای متحرک سازی بهتر است و کدام بدتر است. این در مورد عملکرد است. ما عملکرد را لمس کردیم زیرا انیمیشن یک فرآیند فشرده منابع است.

به طور کلی، مواردی که برای انیمیشن بهتر کار می کنند، در اینجا آمده است:

1. تعیین موقعیت در صفحه
2. مقیاس بندی
3. چرخش
4. شفافیت

علاوه بر این، سه مورد اول این لیست همه پارامترهای ویژگی تبدیل (translate، scale، rotate) هستند. موقعیت یابی در امتداد محورهای X و Y رخ می دهد.

اگر تصمیم دارید هر چیز دیگری را متحرک کنید، با این خطر مواجه می شوید که یک انتقال صاف و روان با سرعت 60 فریم در ثانیه نداشته باشید. پل لوئیس و ایرلندی

و این دقیقاً همان چیزی است که وقتی در مورد عملکرد انیمیشن صحبت می کنیم به آن علاقه مندیم. به طور کلی مناسب ترین ویژگی ها برای انیمیشن هستند تبدیل وکدورت... هنگام متحرک سازی چیز دیگری، فریم در ثانیه انیمیشن می تواند بسیار کمتر از 60 فریم در ثانیه باشد.

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

چگونه در CSS انیمیشن کنم؟

حالا بیایید بفهمیم که چگونه انیمیشن را شروع کنیم. کارهایی که باید انجام شود تا عنصر شروع به انیمیشن کند. به عبارت دیگر، نحوه ساخت انیمیشن درCSS.

کار سختی نیست و راه های مختلفی برای انجام آن وجود دارد. اما 2 مورد اصلی وجود دارد که باید بدون شکست به آنها مسلط شوید. راه اول این است انیمیشن هنگام شناور شدن بر روی یک عنصر(شبه کلاس: شناور). ماوس خود را روی یک عنصر قرار می دهید و انیمیشن فعال می شود. به این ترتیب می توانید خود عنصر یا هر یک از فرزندان آن را متحرک کنید. سپس به شما نشان خواهم داد که چگونه کار می کند. راه دوم این است تغییر کلاس یک عنصر... یعنی شما یک عنصر معمولی دارید، کلاس آن را به کلاسی که سبک های کاملا متفاوتی دارد تغییر می دهید (یا اضافه می کنید). اگر یک کلاس اضافه کنید، انیمیشن اتفاق می افتد و اگر کلاس را حذف کنید، انیمیشن معکوس اتفاق می افتد. این یک راه خوب برای متحرک کردن منوها یا بازشوها است.

پس گفتار

ما هر کاری را که برای ایجاد یک انیمیشن CSS خالص باید انجام دهیم را پوشش داده ایم. خیلی زود نمونه های عملی را تجزیه و تحلیل خواهیم کرد و کمی بعد - نمونه های بسیار جالب.

آیا تا آخر خوانده اید؟

این مقاله به شما کمک کرد؟

نه واقعا

دقیقا چه چیزی را دوست نداشتید؟ مقاله ناقص بود یا نادرست؟
در نظرات بنویسید و ما قول می دهیم که بهتر شویم!