اخبار

     کاربرد keyframes در متحرک سازی با CSS

     ۱۳۹۶-۰۴-۰۳

کاربرد keyframes در متحرک سازی با CSS

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

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

کاربرد keyframes در متحرک سازی با CSS

روش اجرای این پروژه

ابتدا ده دایره آماده می کنیم. برای این کار ده عدد div با کلاس های خاص خودشان در نظر می گیریم:

کد html :

<div class="one"></div>
 <div class="two"></div>
 <div class="three"></div>
 <div class="four"></div>
 <div class="five"></div>
 <div class="six"></div>
 <div class="seven"></div>
 <div class="eight"></div>
 <div class="nine"></div>
 <div class="ten"></div>

با استفاده از css هر یک از div های بالا را استایل دهی می کنیم. استایل همه باید مشابه باشد جز در یک خصوصیت، خصوصیتی که باعث خواهد شد دایره ها همزمان شروع به رشد نکنند و به نوبت و پشت سر هم حرکت کنند. div با کلاس one و two در زیر به عنوان نمونه قرار داده شده

کد css :

.one {
height: 200px;
width: 200px;
position : absolute;
top:20%;
left:50%;
border:1px solid transparent;
animation: growing 5s ease-out 0s infinite,
colorful 5s ease-in-out 0s infinite;
}
.two {
height: 200px;
 width: 200px;
 position : absolute;
 top:20%;
 left:50%;
 border:1px solid transparent;
 animation: growing 5s ease-out .5s infinite , 
 colorful 5s ease-in-out .5s infinite;
}

همانطور که می بینید کلاس one  و  two یک تفاوت با هم دارند و این تفاوت در خصوصیت انیمیشن آنهاست . اسم انیمیشن اول را گذاشتیم growing و اسم انیمیشن دوم colorful و این دو با علامت (,) از هم جدا شده اند. این دو نام که اختیاری هستند را در نظر داشته باشید. در بخش فریم ها تغییرات را با توجه به این نام ها اعمال می کنیم.
هریک از این انیمیشن ها چند ویژگی دیگر علاوه بر اسم دارند، مدت زمان اجرای انیمیشن که برای هردو ۵s به معنی ۵ ثانیه است. شکل انجام انیمیشن که نرم و روان باشد یا خشک که برای growing بصورت ease-out است و این یعنی در هنگام پایان یافتن انیمیشن بصورت نرم و ملایم به پایان برسد و بصورت ناگهانی تمام نشود، برای colorful بصورت ease-in-out است که این یعنی هم در هنگام شروع بصورت ملایم انجام شود و هم در هنگام پایان انیمیشن. ویژگی بعدی زمان شروع انیمیشن است که در کلاس اول ۰s را در نظر گرفتیم یعنی به محض ورود به صفحه در ثانیه صفر کلاس one هر دو انیمیشن را شروع خواهد کرد. اما چیزی که باعث خواهد شد بقیه کلاس ها پشت سر کلاس اول بیایند و همزمان با آن نیایند همین خصوصیت است. در کلاس two زمان شروع دو انیمیشن را .۵s در نظر گرفتیم یعنی ثانیه نیم به این معنی که نیم ثانیه بعد از شروع انیمیشنهای کلاس one انیمیشنهای کلاس two آغاز شود.کاربرد keyframes در متحرک سازی با CSS

انیمیشن کلاس three را نیم ثانیه دیرتر یعنی ثانیه ۱ شروع می کنیم. انیمیشنهای کلاس four را از ثانیه ۱٫۵ و به همین ترتیب کلاس های بعد را با نیم ثانیه تاخیر نسبت به کلاس قبلی …

و اما ویژگی پایانی که برای همه infinite به معنی بدون پایان است. این یعنی انیمیشن ها بعد از پایان دوباره تکرار شوند این تکرار همیشگی باشد. برای این بخش میتوانید مقادیر عددی قرار دهید. به عنوان مثلا عدد ۱ را بجای infinite قرار دهید که به معنی یک بار انجام انیمیشن ها است.

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

کدهای مربوط به تغییر اندازه

کد css :


@keyframes growing {
 ۰% {
 transform: scale(.05);
 border-radius: 50%;
 }
 ۵۰% {
 
 }
 ۱۰۰% {
 transform: scale(1.5);
 border-radius: 50%;
 }
}

@webkit-keyframes growing {
 ۰% {
 transform: scale(.05);
 border-radius: 50%;
 }
 ۵۰% {
 
 }
 ۱۰۰% {
 transform: scale(1.5);
 border-radius: 50%;
 }
}

این کدها برای انیمیشن مربوط به رشد و بزرگ شدن دایره ها است . چند نکته در این قسمت وجود دارد:
– فریم های کلیدی دو بار نوشته شده اند یک برای عموم مرورگرها و یک بار برای مرورگرهایی که با تکنولوژی webkit طراحی شده اند. درصورت رعایت نکردن این موضوع انیمیشن در برخی از مرورگرها به درستی و یا اصلا دیده نمی شود. (مرورگرهایی مانند کروم و سفاری و اوپرا و برخی مرورگرهای دیگر با این تکنولوژی طراحی شده اند)
– انیمیشن مربوط به اندازه دایره ها نیاز به فریم میانی ندارد. یعنی وقتی ۵۰% از انیمیشن انجام شد نیاز نیست که اتفاق خاصی رخ دهد و رشد طبق روال ادامه دارد تا ۱۰۰ درصد . بنابراین در ۵۰% از زمان انیمیشن چیزی در نظر گرفته نشده.

– در فریم مربوط به ۰% یعنی در زمان شروع انیمیشن ها scale که سایز دایره است برابر پنج صدم اندازه می باشد. اگر به کدهایی مربوط به استایل دهی نگاه کنید اندازه طول و عرض ۲۰۰ پیکسل در نظر گرفته شده که این ۵ صدم به معنی پنج صدم ۲۰۰ است .

– در فریم نهایی انیمیشن یعنی ۱۰۰% ، اندازه دایره ۱٫۵ است که این یعنی دایره یک و نیم برابر اندازه اصلی خود شده است. یعنی ۱٫۵ برابر ۲۰۰px که می شود ۳۰۰px .

– در تمام مدت انیمیشن مقدار radius برابر ۵۰ درصد است که باعث میشود ما دایره را ببینیم. اگر این مقدار ۰ باشد ما بجای دایره مربع خواهیم دید. کاربرد keyframes در متحرک سازی با CSS

 

کدهای مربوط به تغییر رنگ دایره ها

کد css :

@webkit-keyframes colorful {
 ۰% {
 border-color: transparent;
 }
 ۵۰% {
 border-color: #fff;
 }
 ۱۰۰% {
 border-color: transparent;
 }
}
@keyframes colorful {
 ۰% {
 border-color: transparent;
 }
 ۵۰% {
 border-color: #fff;
 }
 ۱۰۰% {
 border-color: transparent;
 }
}

توضیحات مربوط به کدهای بالا:

– در ابتدای این انیمیشن ، یعنی در ۰% از زمان سپری شده رنگ خطوط محو (transparent) است.

– در ۵۰% از زمان سپری شده رنگ سفید است

– در پایان انیمیشن یعنی ۱۰۰% زمان سپری شده دوباره رنگ محو خواهد بود.

– با توجه به اینکه برای تغییر رنگ(colorful) از ease-in-out استفاده شده این تغییرات بصورت ملایم و به ارامی رخ می دهد.

– مرورگرهای webkit در این بخش هم در نظر گرفته شده اند.

 

نتیجه نهایی بصورت زیر خواهد بود:

See the Pen example1 by Honartech (@Morteza930) on CodePen.0

 

نمونه ای دیگر با کار بیشتر روی کدهای css

See the Pen colorful borders by Honartech (@Morteza930) on CodePen.0

آموزش های بیشتر

ویدیو ها ، ترفندها و اخبار فن آوری روز دنیا در کانال تلگرام هنرتک

دیدگاه خود را بیان کنید

@

نرم افزار پیشنهادی