در این پست، نحوهی ساخت برخی از انیمیشنهای محبوب موجود در CodePen را بررسی میکنیم. همهی این انیمیشنها از تکنیکهای اجرایی مورد بحث در مقالات دیگر این بخش استفاده میکنند.
برای آشنایی با تئوری پشت این توصیهها، به «چرا بعضی از انیمیشنها کند هستند؟» و برای نکات کاربردی، به « راهنمای انیمیشنها» مراجعه کنید.
انیمیشن بارگذاری ویزارد
انیمیشن بارگذاری ویزارد را در CodePen مشاهده کنید
این انیمیشن بارگذاری کاملاً با CSS ساخته شده است. تصویر به همراه تمام انیمیشن با CSS و HTML ایجاد شده است، بدون تصویر یا جاوا اسکریپت. برای درک نحوه ایجاد آن و میزان عملکرد خوب آن، میتوانید از Chrome DevTools استفاده کنید.
انیمیشن را با Chrome DevTools بررسی کنید
در حالی که انیمیشن در حال اجرا است، تب Performance را در Chrome DevTools باز کنید و چند ثانیه از انیمیشن را ضبط کنید. در خلاصه باید ببینید که مرورگر هنگام اجرای این انیمیشن هیچ عملیات Layout یا Paint انجام نمیدهد.
برای اینکه بفهمید این انیمیشن چگونه بدون ایجاد طرحبندی و رنگآمیزی به دست آمده است، هر یک از عناصر متحرک را در 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 میتوانید با پایین کشیدن پنل Style، فریمهای کلیدی را پیدا کنید. در آنجا متوجه خواهید شد که انیمیشن با استفاده از 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);
}
}
هر یک از بخشهای متحرک مختلف این انیمیشن از تکنیکهای مشابهی استفاده میکنند. نتیجه، یک انیمیشن پیچیده است که به نرمی اجرا میشود.
دایره ضرباندار
دایره ضرباندار را در CodePen مشاهده کنید
این نوع انیمیشن گاهی اوقات برای جلب توجه به چیزی در صفحه استفاده میشود. برای درک انیمیشن میتوانید از Firefox DevTools استفاده کنید.
انیمیشن را با Firefox DevTools بررسی کنید
در حالی که انیمیشن در حال اجرا است، تب Performance را در Firefox DevTools باز کنید و چند ثانیه از انیمیشن را ضبط کنید. ضبط را متوقف کنید، در آبشار باید ببینید که هیچ ورودی برای Recalculate Style وجود ندارد. اکنون میدانید که این انیمیشن باعث محاسبه مجدد سبک و در نتیجه عملیات طرحبندی و رنگآمیزی نمیشود.
با ماندن در فایرفاکس، ابزارهای توسعهدهندگان (DevTools) دایره را بررسی میکنند تا ببینند این انیمیشن چگونه کار میکند. <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;
}
}
راه دیگر برای دیدن اینکه کدام ویژگیها متحرکسازی میشوند، انتخاب پنل Animations در Firefox DevTools است. سپس تصویری از انیمیشنهای مورد استفاده و ویژگیهایی که متحرکسازی میشوند را مشاهده خواهید کرد.
The white circle itself is created and animated using the ::after pseudo-element. The animation pulse-dot uses transform: scale to grow and shrink the dot during the animation.
.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 را در 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 را اجرا نمیکند و روان اجرا میشود.
نتیجهگیری
از این مثالها میتوانید ببینید که چگونه متحرکسازی چند ویژگی با استفاده از متدهای اجرایی میتواند انیمیشنهای بسیار جالبی ایجاد کند. با پیشفرض قرار دادن متدهای اجرایی شرح داده شده در راهنمای انیمیشنها ، میتوانید وقت خود را صرف ایجاد جلوهای که میخواهید کنید، با نگرانی کمتری در مورد کند شدن صفحه.