نمونه هایی از انیمیشن های CSS با کارایی بالا

Rachel Andrew

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

ببینید چرا برخی از انیمیشن ها کند هستند؟ برای یادگیری تئوری پشت این توصیه ها، و راهنمای انیمیشن ها برای نکات عملی.

بارگذاری انیمیشن جادوگر

انیمیشن بارگذاری جادوگر را در CodePen مشاهده کنید

این انیمیشن بارگذاری به طور کامل با CSS ساخته شده است. تصویر به علاوه تمام انیمیشن در CSS و HTML ایجاد شده است، بدون تصویر یا جاوا اسکریپت. برای درک نحوه ایجاد و عملکرد آن می‌توانید از Chrome DevTools استفاده کنید.

انیمیشن را با Chrome DevTools بررسی کنید

با اجرای انیمیشن، تب Performance را در Chrome DevTools باز کنید و چند ثانیه از انیمیشن را ضبط کنید. در خلاصه باید ببینید که مرورگر هیچ عملیات Layout یا Paint را هنگام اجرای این انیمیشن انجام نمی دهد.

برای اینکه بفهمید چگونه این انیمیشن بدون ایجاد طرح‌بندی و رنگ به دست آمده است، هر یک از عناصر متحرک را در Chrome DevTools بررسی کنید. می توانید از پانل انیمیشن ها برای مکان یابی عناصر متحرک مختلف استفاده کنید، با کلیک بر روی هر عنصر آن را در DOM برجسته می کنید.

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

در حالی که عنصر هنوز انتخاب شده است، به پنل Styles نگاه کنید. در آنجا می توانید 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);
  }
}

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

دایره ضربان دار

دایره ضربان دار را در CodePen مشاهده کنید

گاهی اوقات از این نوع انیمیشن برای جلب توجه به چیزی در صفحه استفاده می شود. برای درک انیمیشن می توانید از Firefox DevTools استفاده کنید.

انیمیشن را با Firefox DevTools بررسی کنید

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

با ماندن در Firefox 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 است. سپس تصویری از انیمیشن های مورد استفاده و ویژگی هایی که متحرک می شوند را مشاهده خواهید کرد.

دایره سفید خود با استفاده از شبه عنصر ::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 را راه اندازی نمی کند و به آرامی اجرا می شود.

نتیجه گیری

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