در این پست با نحوه ایجاد برخی‌از پویانمایی‌های پرطرفدار در CodePen آشنا شوید. These animations all use the performant techniques discussed in other articles in this section.
برای آشنایی با تئوری پشت این توصیه‌ها، چرا برخی‌از پویانمایی‌ها کند هستند؟ را ببینید و برای نکات کاربردی، راهنمای پویانمایی‌ها را ببینید.
پویانمایی بار کردن جادوگر
مشاهده پویانمایی بار کردن «جادوگر» در CodePen
این پویانمایی بار کردن کاملاً با CSS ساخته شده است. تصویر به‌علاوه همه پویانمایی‌ها در CSS و HTML ایجاد شده است، بدون تصویر یا جاوا اسکریپت. برای درک نحوه ایجاد آن و میزان عملکرد آن می‌توانید از Chrome DevTools استفاده کنید.
بازرسی پویانمایی با Chrome DevTools
With the animation running, open the Performance tab in Chrome DevTools and record a few seconds of the animation. در «خلاصه» باید ببینید که مرورگر هنگام اجرای این پویانمایی هیچ عملیات «چیدمان» یا «رنگ‌آمیزی» انجام نمی‌دهد.
برای اینکه بدانید این پویانمایی چگونه بدون ایجاد چیدمان و رنگ‌آمیزی به‌دست آمده است، هرکدام از عناصر متحرک را در Chrome DevTools بازرسی کنید. می‌توانید از پانل پویانمایی‌ها برای پیدا کردن عناصر پویانمایی‌شده مختلف استفاده کنید، با کلیک کردن روی هر عنصر، آن عنصر در DOM برجسته می‌شود.
برای مثال، مثلث را انتخاب کنید، و ببینید که چگونه جعبه عنصر درطول سفرش به هوا، درحالی‌که می‌چرخد، تغییر شکل می‌دهد و سپس به موقعیت شروع برمی‌گردد.
درحالی‌که عنصر همچنان انتخاب شده است، به «پانل سبک‌ها» نگاه کنید. در آنجا می‌توانید CSS را که شکل مثلث را می‌کشد، و پویانمایی مورداستفاده را ببینید.
روش کار
مثلث بااستفاده از شبه‌عنصر ::after برای افزودن محتوای تولیدشده ایجاد می‌شود،
و از حاشیه‌ها برای ایجاد شکل استفاده می‌شود.
.triangle {
position: absolute;
bottom: -62px;
left: -10px;
width: 110px;
height: 110px;
border-radius: 50%;
}
.triangle::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 28px 48px 28px;
border-color: transparent transparent #89beb3 transparent;
}
پویانمایی با خط CSS زیر اضافه می‌شود،
animation: path_triangle 10s ease-in-out infinite;
با ماندن در Chrome DevTools می‌توانید با پیمایش به پایین «پانل سبک»، قاب‌های کلیدی را پیدا کنید.
در آنجا خواهید دید که پویانمایی بااستفاده از transform برای تغییر موقعیت عنصر و چرخاندن آن ایجاد شده است.
ویژگی transform یکی از ویژگی‌های شرح‌داده‌شده در راهنمای پویانمایی‌ها است،
که باعث نمی‌شود مرورگر عملیات چیدمان یا رنگ‌آمیزی را انجام دهد (که دلایل اصلی پویانمایی‌های کند هستند).
@keyframes path_triangle {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-172px) translatex(10px) rotate(-10deg);
}
55% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
58% {
transform: translateY(-172px) translatex(10px) rotate(-365deg);
}
63% {
transform: rotate(-360deg);
}
}
هریک از بخش‌های متحرک مختلف این پویانمایی از تکنیک‌های مشابهی استفاده می‌کند. نتیجه پویانمایی پیچیده‌ای است که به‌طور روان اجرا می‌شود.
دایره تپنده
گاهی‌اوقات از این نوع پویانمایی برای جلب توجه به چیزی در صفحه استفاده می‌شود. برای درک پویانمایی می‌توانید از Firefox DevTools استفاده کنید.
بازرسی کردن پویانمایی با Firefox DevTools
With the animation running, open the Performance tab in Firefox DevTools and record a few seconds of the animation. ضبط را متوقف کنید، در آبشار باید ببینید که هیچ ورودی‌ای برای Recalculate Style (محاسبه مجدد سبک) وجود ندارد. اکنون می‌دانید که این پویانمایی باعث محاسبه مجدد سبک نمی‌شود، و بنابراین عملیات چیدمان و رنگ‌آمیزی انجام نمی‌شود.
Staying in Firefox DevTools inspect the circle to see how this animation works.
<div> با کلاس pulsating-circle موقعیت دایره را علامت‌گذاری می‌کند،
اما خودش دایره‌ای رسم نمی‌کند.
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
دایره قابل‌مشاهده و پویانمایی‌ها بااستفاده از شبه‌عناصر ::before و ::after به‌دست می‌آیند.
عنصر ::before حلقه ماتی را ایجاد می‌کند که به خارج از دایره سفید گسترش می‌یابد،
بااستفاده از پویانمایی‌ای به‌نام pulse-ring،
که transform: scale و opacity را پویانمایی می‌کند.
.pulsating-circle::before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
راه دیگر برای دیدن اینکه کدام ویژگی‌ها پویانمایی می‌شوند، انتخاب پانل پویانمایی‌ها در Firefox DevTools است. سپس تجسمی از پویانمایی‌های درحال استفاده و ویژگی‌هایی را که پویانمایی می‌شوند خواهید دید.
خود دایره سفید بااستفاده از شبه‌عنصر ::after ایجاد و پویانمایی می‌شود.
پویانمایی pulse-dot از transform: scale برای بزرگ و کوچک کردن نقطه درطول پویانمایی استفاده می‌کند.
.pulsating-circle::after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
پویانمایی‌ای مثل این می‌تواند در جاهای مختلفی از برنامه‌تان استفاده شود، مهم است که این جزئیات کوچک بر عملکرد کلی برنامه‌تان تأثیر نگذارد.
کره سه‌بعدی CSS خالص
مشاهده Pure CSS 3D Sphere در CodePen
این پویانمایی بسیار پیچیده به‌نظر می‌رسد، اما از تکنیک‌هایی استفاده می‌کند که قبلاً در مثال‌های قبلی دیده‌ایم. پیچیدگی از پویانمایی تعداد زیادی عنصر ناشی می‌شود.
Chrome DevTools را باز کنید و یکی از عناصر دارای کلاس plane را انتخاب کنید.
کره از مجموعه‌ای از صفحه‌ها و پره‌های چرخان تشکیل شده است.
این صفحه‌ها و پره‌ها داخل یک پوشش <div> قرار دارند،
و این عنصر است که بااستفاده از transform: rotate3d می‌چرخد.
.sphere-wrapper {
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: relative;
animation: rotate3d 10s linear infinite;
}
@keyframes rotate3d {
0% {
transform: rotate3d(1, 1, 1, 0deg);
}
25% {
transform: rotate3d(1, 1, 1, 90deg);
}
50% {
transform: rotate3d(1, 1, 1, 180deg);
}
75% {
transform: rotate3d(1, 1, 1, 270deg);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
نقطه‌ها را می‌توان به‌صورت تودرتو در عناصر plane و spoke پیدا کرد،
آن‌ها از پویانمایی‌ای استفاده می‌کنند که از تبدیل برای مقیاس‌بندی و ترجمه آن‌ها استفاده می‌کند.
این کار جلوه تپشی ایجاد می‌کند.
.spoke-15 .dot,
.spoke-21 .dot {
animation: pulsate 0.5s infinite 0.83333333s alternate both;
background-color: #55ffee;
}
@-webkit-keyframes pulsate {
0% {
transform: rotateX(90deg) scale(0.3) translateZ(20px);
}
100% {
transform: rotateX(90deg) scale(1) translateZ(0px);
}
}
کار انجام شده برای ساخت این پویانمایی، تنظیم درست زمان‌بندی، و ایجاد جلوه چرخش و تپش بوده است. پویانمایی‌ها به‌خودی‌خود بسیار ساده هستند و از روش‌هایی استفاده می‌کنند که عملکرد بسیار خوبی دارند.
با باز کردن Chrome DevTools و ضبط «عملکرد» درحین اجرا، می‌توانید ببینید این پویانمایی چگونه عمل می‌کند. پس‌از بارگیری اولیه، پویانمایی Layout یا Paint را راه‌اندازی نمی‌کند، و به‌آرامی اجرا می‌شود.
نتیجه‌گیری
From these examples you can see how animating a few properties using performant methods can create some very cool animations. با پیش‌فرض قرار دادن روش‌های کارآمد شرح‌داده‌شده در راهنمای پویانمایی‌ها می‌توانید وقتتان را صرف ایجاد جلوه موردنظرتان کنید و کمتر نگران کند شدن صفحه باشید.