CSS انیمیشن و امکانات آن

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

راز توسعه ایده آل

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

ظاهر CSS-انیمیشن

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

این واقعیت که تغییرات واقعی به سایت در یک قطعه از انیمیشن و یا در تمامیت آن می تواند تقریبا آنی. برای انجام این کار، ما هر دو keyframes بپرسید، اما استفاده از طیف بسیار کوچک است. به عنوان مثال، ممکن است به 0.001٪ برابر است. در این مورد، انیمیشن CSS می تواند فورا اتفاق می افتد. این مناسب برای شبیه سازی یک نشانه نئون است. این علامت چشمک زدن خواهد، و اگر CSS انیمیشن خواهد شد و سپس، شفافیت بیشتر و برای استفاده و ویژگی متن سایه، امضا خواهد کرد تقریبا مثل چیزی که واقعی است.

در اینجا یک مثال کد است.

بهبود دکمه های کاربردی

اگر ما این سوال که چه ممکن است غیر معمول در نظر دکمه CSS-انیمیشن، می توان گفت که دکمه گزینه های دکوراسیون در سایت های مجموعه ای بزرگ است. یکی از نمونه های در نظر بگیرید. اثر فشار دادن دکمه های محدب است. کد به عنوان مثال - در زیر.

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

CSS-انیمیشن زمانی که شما بر روی یک قطعه شناور سایت

سایت پویا و مدرن، دیگر آن را در کاربر باقی مانده است. علاوه بر این، نقش مهمی نیز توسط تعامل ایفا کرده است. این کاملا درست است، اما آنچه می تواند کمک به سایت به عنوان تعاملی که ممکن است؟

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

بنابراین، یک انتقال مالکیت عالی، که می تواند به چهار خواص مربوط را وجود دارد.

در طول یک زمان خاص CSS-انیمیشن زمانی که شما بیش از این قطعه از کد را تغییر خواهد داد شناور. ساعت، توسط property مدت زمان تعیین می شود. است که، زمانی که شما بیش از یک آیتم شناور آن آغاز می شود یک تغییر عجیب و غریب هر ملک که ما در انتخاب تنظیم شده است. در مورد ما آن است - .element (نقطه به جلو). تا حدودی زیر یک مثال از کد، زمانی که گذار از DIV ظرف، که دارای .hover شبه، پس زمینه تغییر از قرمز به سبز است.

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

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

به عنوان مثال کد نمایندگی شرح زیر است.

همانطور که در خواص padding و اثر گذار پس زمینه نشان داده رخ می دهد که انتقال مالکیت تعیین می شود. شما باید توجه داشته باشید که شما می توانید یک مجموعه خاص کاما از هم جدا از ارزش را مشخص کنید.

برخی تفاوت های ظریف از استفاده از این نوع انیمیشن بر روی دکمه

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

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

انیمیشن متن

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

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

تحریک و تشجیع کردن متن در سبک فیلم های ترسناک

در واقع، کل ایده این است که متن که در آن نامه کمی گنگ و مبهم بود و می چرخند. در جایی که بین حروف باید یک فضای باشد. ما سایه interalphabetic، و همچنین فاصله استفاده کنید. به منظور پیاده سازی این ایده، ما نیاز به یک اسکریپت Lettering.js نویسندگی دیو روپرت. او نیاز به بسته بندی کردن کلمه به همراه چند حرف در طول برچسب. در ابتدا شما نیاز به بسته بندی کردن این عبارت را در برچسب h2. در اینجا یک مثال کد است.

سپس obernom تمامی واژگان در H2 تگ در محدوده تگ.

این مثل این اتفاق می افتد.

آن را نگاه کنید تا حدودی دست و پا گیر، اما اجازه ندهید که زحمت.

جنون دست آوردن ساختار کافی است.

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

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

از آنجا که ما در حال رفتن به جای تمام نامه های ما در مرکز صفحه، پس از آن، برای ظرف و ما نیز نیاز flexbox.

در اینجا یک مثال از کد آن است.

در حال حاضر ما انجام داده اند به طوری که تمام نامه ها، که در یک کلاس دهانه، که متعلق به کلاس پدر و مادر .os-عبارات پیچیده، واقع خواهد شد و خواهد شد به آن را در وسط متصل شده است.

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

در این مورد، لفاف بسته بندی برای اولین بار می خواهم به خصوصیات اضافی است. این دیدگاه اموال. این به ما اجازه خواهد تا مطمئن شوید که این سایت مانند خواهد بود به ایستادگی کردن، به جلو می آیند.

خود را به عنوان نامه های ما شفاف خواهد بود، و ما طیف وسیعی از انیمیشن برای آنها جایی در 5.2 ثانیه راه اندازی. در زیر - به عنوان مثال کد.

همچنین مهم است برای تعیین چگونه و با چه تاخیر جملات و عبارات ظاهر خواهد شد. کدام یک از بخش هایی از متن سریعتر از یکی از قبلی ظاهر خواهد شد، و چه مقدار. کد خواهد شبیه به این.

اجازه دهید ما یک اثر کوچک اما بسیار جالب است. محل کدورت از 0.2. بنابراین فاصله Interalphabetic خواهد بود کاملا بزرگ. نامه نیز برای چند Y. محور چرخش شما نگاه کنید، و همچنین کاربران سایت شما خواهد شد تنها بخش کوچکی از این نامه ها. همچنین، فراموش نکنید که به اثر از خواص متن سایه. انیمیشن نیمه، ما چیزی غیر معمول است. ما ما را به نامه های مستقیم خود، و همچنین به منظور کاهش فاصله است که بین آنها، و پس از آن افزایش کدورت، و پس از نشانه povernom در 0 برای Y. محور

در پایان، ما دوباره چند حرف اضافه و یا در معرض خطر promasshtabiruem آنها. این اثر جدید تاری کوچک را.

و در نهایت آخرین عبارت CSS-انیمیشن.

و بله، در نهایت لمس نهایی اضافه کنید. ما در برخی از کلمات خاص تمرکز خواهد کرد. آنها به یک صورت جسورانه است. این تاکید لزوم.

آیا در مورد الهام بخش را فراموش نکنید

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

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