گذار و پویانمایی

گذار

بدون گذار، ویژگی در یک قاب عوض می‌شود: کارتی که اشاره‌اش کرده‌اید ناگهان پایین‌تر است، دکمه‌ای ناگهان سرخ. گذار (transition) به مرورگر می‌گوید از مقدار قدیم تا جدید را در مدتی بپیماید. هر وقت مقدار عوض شود اجرا می‌شود، به هر دلیل: اشاره، تمرکز یا کلاسی که برنامه جابه‌جایش می‌کند. ویژگی گذار میان‌بُر چهار چیز به این ترتیب است: ویژگی‌ای که پویانمایی می‌شود، مدت، تابع زمان‌بندی و تأخیر. چند گذار را با ویرگول از هم جدا می‌کنند.

صفحه:
    عنوان = "گذار هنگام اشاره"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 30 پس زمینه = "#f1f5f9" پایان
    جعبه:
        عرض = 240
        فاصله = 20
        پس زمینه = white
        گردی کادر = 12
        سایه کادر = "0 1px 3px rgba(0, 0, 0, 0.25)"
        گذار = "transform 200ms ease-out, box-shadow 200ms ease-out"
        اشاره دگرگونی = "translateY(-6px)"
        اشاره سایه کادر = "0 14px 24px rgba(0, 0, 0, 0.25)"
        سرتیتر: اندازه = 3 فضا = "0 0 8" محتوا = "موشواره را بیاورید" پایان
        پاراگراف: فضا = 0 محتوا = "کارت بالا می‌آید و سایه‌اش در ۲۰۰ میلی‌ثانیه بزرگ می‌شود." پایان
    پایان
پایان

کارت حرکت می‌کند و سایه‌اش بزرگ می‌شود، هر کدام در ۲۰۰ میلی‌ثانیه با ease-out که تند شروع می‌کند و آرام تمام می‌شود. گذار را روی حالت عادی بگذارید نه روی حالت اشاره: آن‌وقت کارت وقتی اشاره‌گر می‌رود هم نرم برمی‌گردد. ویژگی‌های تکی هر کدام یک بخش را می‌گیرند: ویژگی گذار نام ویژگی‌ها را می‌گوید (all یعنی همه، که راحت است و هدردهنده، پس آنچه را می‌خواهید فهرست کنید)، مدت گذار زمانی مثل 200ms یا 0.3s است، تاخیر گذار پیش از شروع صبر می‌کند و تابع زمان‌بندی گذار منحنی سرعت است.

منحنی مهم‌تر از آن است که بیشتر مردم فکر می‌کنند. linear سرعت ثابت است و مکانیکی به نظر می‌رسد. ease پیش‌فرض است، ease-in آهسته شروع می‌کند، ease-out آهسته تمام می‌کند و به چیزهایی که می‌رسند می‌خورد، و ease-in-out هر دو را دارد. cubic-bezier(x1, y1, x2, y2) منحنی خودتان را می‌کشد، و وقتی y از ۱ بالاتر یا از ۰ پایین‌تر برود حرکت از مقصد رد می‌شود و برمی‌گردد. steps(n) در n جهش پیش می‌رود، مثل عقربه‌ی ساعت، و پایه‌ی پویانمایی‌های اسپرایت است. «اجرا» را بزنید تا پنج‌تایشان را کنار هم ببینید.

واردسازی دام

تابع اجرا():
    دام.تعویض کلاس(دام.با شناسه("lanes"), "go")
پایان

بخش مسیر(شیوه):
    جعبه:
        کلاس = "track"
        موقعیت = relative
        ارتفاع = 28
        فضا = "6 0"
        پس زمینه = "#e2e8f0"
        گردی کادر = 14
        جعبه: عرض = 28 ارتفاع = 28 گردی کادر = 14 پس زمینه = "#0f766e" گذار = "transform 1.5s " + شیوه پایان
        پاراگراف: موقعیت = absolute بالا = 4 چپ = 40 فضا = 0 اندازه قلم = 13 محتوا = شیوه پایان
    پایان
پایان

صفحه:
    عنوان = "تابع‌های شیوه"
    سبک: محتوا = ".go .track > div { transform: translateX(260px) }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        شناسه = "lanes"
        بیشینه عرض = 340
        مسیر: شیوه = "linear" پایان
        مسیر: شیوه = "ease-in" پایان
        مسیر: شیوه = "ease-out" پایان
        مسیر: شیوه = "steps(5)" پایان
        مسیر: شیوه = "cubic-bezier(0.3, 1.6, 0.6, 1)" پایان
    پایان
    دکمه: فضا بالا = 10 کلیک = اجرا محتوا = "اجرا" پایان
پایان

فقط ویژگی‌هایی که میانه دارند گذار می‌کنند: رنگ، طول، شفافیت، دگرگونی و مانند آن. رفتن از display: none به block میانه‌ای ندارد، پس به‌طور پیش‌فرض یکباره رخ می‌دهد. رفتار گذار = "allow-discrete" می‌گذارد چنین ویژگی‌هایی هم در گذار شرکت کنند و تغییرشان در انتهای درست آن رخ دهد، و همراه قاعده‌ی خام @starting-style می‌گذارد عنصر هنگام نخستین ظاهر شدنش محو و آشکار شود.

دگرگونی

دگرگونی (transform) پس از پایان چیدمان عنصر را جابه‌جا می‌کند، می‌چرخاند، مقیاس می‌دهد و کج می‌کند. یک یا چند تابع می‌گیرد: translate(x, y) جابه‌جا می‌کند، rotate(angle) با درجه (45deg) یا دور (0.25turn) می‌چرخاند، scale(n) اندازه را ضرب می‌کند، skew(x, y) کج می‌کند و matrix(a, b, c, d, e, f) همه‌ی این‌ها به شکل عدد است. تابع‌ها از راست به چپ اعمال می‌شوند. در translate(100px) rotate(45deg) نخست عنصر چرخانده می‌شود و بعد ۱۰۰ پیکسل به راست می‌رود، و در rotate(45deg) translate(100px) در امتداد محور خودش که از پیش چرخیده جابه‌جا می‌شود و اریب می‌رسد. جای تابع‌ها را عوض کنید، تصویر دیگری می‌گیرید.

بخش کاشی(برچسب، حرکت، مبدا):
    جعبه:
        عرض = 90
        ارتفاع = 60
        نمایش = grid
        موارد جای‌گذاری = center
        پس زمینه = "#bfdbfe"
        کادر = "2px solid #1d4ed8"
        دگرگونی = حرکت
        مبدا دگرگونی = مبدا
        محتوا = برچسب
    پایان
پایان

صفحه:
    عنوان = "تابع‌های دگرگونی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 30 پایان
    جعبه:
        نمایش = flex
        پیچش فلکس = wrap
        شکاف = 36
        کاشی: برچسب = "جابه‌جایی" حرکت = "translate(20px, 10px)" مبدا = "center" پایان
        کاشی: برچسب = "چرخش" حرکت = "rotate(-12deg)" مبدا = "center" پایان
        کاشی: برچسب = "مقیاس" حرکت = "scale(1.25)" مبدا = "center" پایان
        کاشی: برچسب = "کجی" حرکت = "skew(-15deg, 0)" مبدا = "center" پایان
        کاشی: برچسب = "مبدا" حرکت = "rotate(25deg)" مبدا = "top left" پایان
        جعبه:
            عرض = 90
            ارتفاع = 60
            نمایش = grid
            موارد جای‌گذاری = center
            پس زمینه = "#fde68a"
            کادر = "2px solid #b45309"
            چرخش = "8deg"
            مقیاس = 1.1
            جابه‌جایی = "0 12px"
            محتوا = "جدا"
        پایان
    پایان
پایان

عنصر دگرگون‌شده جایش را در چیدمان نگه می‌دارد: همسایه‌هایش جابه‌جا نمی‌شوند و تصویر عنصر جای دیگری کشیده می‌شود. برای همین است که دگرگونی بهترین ابزار پویانمایی است. چرخش حول میانه‌ی عنصر رخ می‌دهد، مگر اینکه مبدا دگرگونی چیز دیگری بگوید: کاشی «مبدا» حول گوشه‌ی بالا و چپش می‌چرخد. جعبه دگرگونی جعبه‌ای را برمی‌گزیند که مبدا در آن اندازه گرفته می‌شود، که برای تصویرهای SVG مهم است و آنجا fill-box یعنی خود شکل عنصر.

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

پرسپکتیو و سه‌بعدی

بعد سوم را اضافه کنید تا بتوانید کارت را برگردانید. پرسپکتیو روی والد می‌گوید بیننده چقدر از صفحه دور است، به پیکسل: عدد کوچکی مثل ۳۰۰ عمق قوی و نمایشی می‌دهد و عدد بزرگ عمق ملایم. مبدا پرسپکتیو جای چشم بیننده است، که به‌طور پیش‌فرض وسط است. بعد فرزند با rotateX یا rotateY حول محور افقی یا عمودی چرخانده می‌شود. برای اینکه رو و پشت کارت دو سمت واقعی باشند، عنصر چرخنده سبک دگرگونی = "preserve-3d" می‌خواهد که فرزندانش را در همان فضای سه‌بعدی نگه می‌دارد و به صفحه‌ی خودش نمی‌چسباندشان، و هر رو دیدپذیری پشت = hidden که وقتی پشتش به شما است پنهانش می‌کند.

واردسازی دام

ناپایا برگشته := نادرست

تابع برگرداندن():
    برگشته = وارونه برگشته
    اگر برگشته:
        دام.تنظیم سبک(دام.با شناسه("card"), "transform", "rotateY(180deg)")
    وگرنه:
        دام.تنظیم سبک(دام.با شناسه("card"), "transform", "rotateY(0deg)")
    پایان
پایان

صفحه:
    عنوان = "کارت چرخان"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 30 پایان
    جعبه:
        عرض = 200
        ارتفاع = 120
        پرسپکتیو = 800
        دکمه:
            شناسه = "card"
            کلیک = برگرداندن
            موقعیت = relative
            عرض = "100%"
            ارتفاع = "100%"
            فاصله = 0
            کادر = none
            پس زمینه = none
            اندازه قلم = 18
            سبک دگرگونی = "preserve-3d"
            گذار = "transform 600ms"
            تکه: نمایش = block موقعیت = absolute بالا = 0 چپ = 0 عرض = "100%" ارتفاع = "100%" ارتفاع خط = "120px" گردی کادر = 12 پس زمینه = "#0f766e" رنگ = white دیدپذیری پشت = hidden محتوا = "رو" پایان
            تکه: نمایش = block موقعیت = absolute بالا = 0 چپ = 0 عرض = "100%" ارتفاع = "100%" ارتفاع خط = "120px" گردی کادر = 12 پس زمینه = "#f59e0b" دگرگونی = "rotateY(180deg)" دیدپذیری پشت = hidden محتوا = "پشت" پایان
        پایان
    پایان
پایان

روی کارت کلیک کنید. رو یک رویه‌ی عادی است و پشت از پیش نیمه‌چرخانده شده با rotateY(180deg)، پس وقتی کل کارت می‌چرخد پشت به جلو می‌آید. دکمه کارت را با صفحه‌کلید و صفحه‌خوان دست‌یافتنی می‌کند. کنترل‌کننده دگرگونی را با برنامه عوض می‌کند، چون وضعیت (چرخیده یا نه) در یک متغیر است، و گذار حرکت را انجام می‌دهد.

پویانمایی با قاب‌های کلیدی

گذار وقتی چیزی عوض شود از الف به ب می‌رود. پویانمایی (animation) خودش اجرا می‌شود، هر چند بار که بگویید، و از هر تعداد مرحله می‌تواند بگذرد. دو بخش دارد: قاب‌های کلیدی (keyframes) که می‌گویند عنصر در نقطه‌هایی از پویانمایی چه شکلی دارد، و ویژگی‌های پویانمایی روی عنصر که می‌گویند کدام قاب‌ها را و چگونه اجرا کند. قاب‌های کلیدی با قاعده‌ی @keyframes و یک نام نوشته می‌شوند. سلام برای آن عنصری ندارد، چون فهرست قاب‌ها جزئی از هیچ عنصری نیست: یک فهرست نام‌دار برای کل صفحه است که هر عنصری می‌تواند به کارش ببرد. پس CSS خام است، درون عنصر سبک.

صفحه:
    عنوان = "نشانگر بارگذاری"
    سبک: محتوا = "@keyframes spin { to { transform: rotate(1turn) } }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 30 پایان
    جعبه:
        عرض = 48
        ارتفاع = 48
        کادر = "6px solid #e2e8f0"
        رنگ کادر بالا = "#0f766e"
        گردی کادر = "50%"
        پویانمایی = "spin 1s linear infinite"
    پایان
    پاراگراف: محتوا = "در حال بارگذاری" پایان
پایان

قاب‌ها فقط می‌گویند کجا تمام شود: to { transform: rotate(1turn) }. آغاز، حالت عادی عنصر است. میان‌بُر پویانمایی روی جعبه قاب‌ها را نام می‌برد و بعد مدت، تابع زمان‌بندی و تعداد تکرار را می‌دهد: یک ثانیه، سرعت ثابت، همیشه. همین را با ویژگی‌های تکی نوشتن خواناتر و تغییرش آسان‌تر است. در نمونه‌ی بعد هر کدام یک سطر دارد و نقطه‌ها تاخیر پویانمایی متفاوتی می‌گیرند تا یکی‌یکی بپرند.

بخش نقطه(تاخیر):
    جعبه:
        عرض = 16
        ارتفاع = 16
        گردی کادر = "50%"
        پس زمینه = "#1d4ed8"
        نام پویانمایی = bounce
        مدت پویانمایی = "0.5s"
        تابع زمان‌بندی پویانمایی = "ease-in-out"
        تعداد تکرار پویانمایی = infinite
        جهت پویانمایی = alternate
        تاخیر پویانمایی = تاخیر
    پایان
پایان

صفحه:
    عنوان = "نقطه‌های جهنده"
    سبک: محتوا = "@keyframes bounce { from { transform: translateY(0) } to { transform: translateY(-28px) } }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 30 پایان
    جعبه:
        نمایش = flex
        شکاف = 10
        ترازعمودی = "flex-end"
        ارتفاع = 50
        نقطه: تاخیر = "0s" پایان
        نقطه: تاخیر = "0.15s" پایان
        نقطه: تاخیر = "0.3s" پایان
    پایان
پایان

ویژگی‌های تکی این‌ها هستند: نام پویانمایی، قاب‌هایی که اجرا شوند؛ مدت پویانمایی، زمان یک دور؛ تابع زمان‌بندی پویانمایی، منحنی هر گام میان قاب‌ها؛ تاخیر پویانمایی، صبر پیش از آغاز (تأخیر منفی پویانمایی را از میانه‌ی راه شروع می‌کند)؛ تعداد تکرار پویانمایی، یک عدد یا infinite؛ و جهت پویانمایی. جهت alternate یک بار جلو و یک بار عقب می‌رود، برای همین نقطه‌ها بالا و پایین می‌روند و نمی‌پرند. reverse عقب‌رو است و alternate-reverse از عقب شروع می‌کند.

پیش از آغاز و پس از پایان، عنصر طوری است که گویی پویانمایی نبوده. این برای چیزهایی که پدیدار می‌شوند عجیب است. با تأخیر، عنصر اول کاملاً دیده می‌شود، بعد به قاب نخست می‌پرد، بعد پویانمایی می‌شود، و آخر دوباره برمی‌گردد. حالت پرکردن پویانمایی این را عوض می‌کند: backwards قاب نخست را در مدت تأخیر اعمال می‌کند، forwards قاب آخر را پس از پایان نگه می‌دارد و both هر دو را. فهرست زیر both به کار می‌برد تا هر سطر نادیده منتظر بماند و بعد سر جایش بماند. «بازپخش» دوباره راهش می‌اندازد.

واردسازی دام

تابع بازپخش():
    دام.افزودن کلاس(دام.با شناسه("list"), "off")
    دام.تنظیم مهلت((): دام.حذف کلاس(دام.با شناسه("list"), "off") پایان، 60)
پایان

بخش سطر(متن، نوبت):
    جعبه:
        فاصله = 12
        فضا = "0 0 8"
        پس زمینه = "#e0f2fe"
        گردی کادر = 8
        نام پویانمایی = rise
        مدت پویانمایی = "0.5s"
        حالت پرکردن پویانمایی = both
        تاخیر پویانمایی = نوبت
        محتوا = متن
    پایان
پایان

صفحه:
    عنوان = "ورود یکی‌یکی"
    سبک: محتوا = "@keyframes rise { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } } .off > div { animation: none }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    جعبه:
        شناسه = "list"
        بیشینه عرض = 320
        سطر: متن = "نخست" نوبت = "0s" پایان
        سطر: متن = "دوم" نوبت = "0.2s" پایان
        سطر: متن = "سوم" نوبت = "0.4s" پایان
    پایان
    دکمه: کلیک = بازپخش محتوا = "بازپخش" پایان
پایان

دکمه‌ی بازپخش کلاسی را اضافه می‌کند که یک لحظه پویانمایی را خاموش می‌کند و بعد برش می‌دارد، چون پویانمایی وقتی نامش برداشته و دوباره گذاشته شود از نو شروع می‌شود. در صفحه، .off > div قاعده‌ی خامی است که تا وقتی کلاس هست animation: none می‌گذارد.

وضعیت پخش پویانمایی یا running است یا paused و توقف پویانمایی را همان‌جا نگه می‌دارد. هر چیزی که خودش بیش از چند ثانیه حرکت می‌کند باید راهی برای ایستادن داشته باشد، برای کسانی که وقتی چیزی حرکت می‌کند نمی‌توانند بخوانند. صفحه‌ی بعد این را با یک خط برنامه می‌کند، دام.تنظیم سبک(el, "animation-play-state", "paused").

واردسازی دام

ناپایا روان := درست

تابع تعویض():
    روان = وارونه روان
    اگر روان:
        دام.تنظیم سبک(دام.با شناسه("ring"), "animation-play-state", "running")
        دام.تنظیم متن(دام.با شناسه("btn"), "توقف")
    وگرنه:
        دام.تنظیم سبک(دام.با شناسه("ring"), "animation-play-state", "paused")
        دام.تنظیم متن(دام.با شناسه("btn"), "ادامه")
    پایان
پایان

صفحه:
    عنوان = "توقف پویانمایی"
    سبک: محتوا = "@keyframes spin { to { transform: rotate(1turn) } }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 30 پایان
    جعبه:
        شناسه = "ring"
        عرض = 48
        ارتفاع = 48
        کادر = "6px solid #e2e8f0"
        رنگ کادر بالا = "#be123c"
        گردی کادر = "50%"
        پویانمایی = "spin 1.2s linear infinite"
    پایان
    دکمه: شناسه = "btn" فضا بالا = 16 کلیک = تعویض محتوا = "توقف" پایان
پایان

یک ویژگی دیگر، ترکیب‌بندی پویانمایی، وقتی مهم می‌شود که عنصر از پیش مقداری دارد و پویانمایی به آن اضافه می‌کند. replace پیش‌فرض است و مقدار زیرین را نادیده می‌گیرد، add مقدار پویانمایی را به آن می‌افزاید و accumulate همین کار را برای فهرست‌هایی مثل چند تابع دگرگونی می‌کند. با آن دو پویانمایی که هر دو transform را می‌نویسند با هم کار می‌کنند.

نرم و کم‌هزینه

پویانمایی حدود ۶۰ بار در ثانیه بازکشیده می‌شود، پس هر قاب کمی بیشتر از ۱۶ میلی‌ثانیه وقت دارد. عوض کردن عرض، ارتفاع، بالا یا چپ مرورگر را وادار می‌کند در هر قاب صفحه را دوباره بچیند، و روی تلفن این لرزش می‌آورد. عوض کردن دگرگونی و شفافیت معمولاً نه چیدمان می‌خواهد و نه حتی نقاشی: مرورگر عنصر را به شکل تصویری روی کارت گرافیک نگه می‌دارد و فقط جابه‌جایش می‌کند. هر وقت می‌توانید با translate جابه‌جا کنید و با شفافیت پنهان.

تغییر پیش‌رو اشاره‌ای است که یک ویژگی می‌خواهد عوض شود، مثل تغییر پیش‌رو = transform، تا مرورگر آن تصویر را زودتر آماده کند. آن را روی چند عنصر و درست پیش از پویانمایی‌شان بگذارید و بعدش بردارید: هر عنصری که این‌طور آماده شود حافظه می‌خورد، و صفحه‌ای که این را برای همه‌چیز بگوید کندتر می‌شود.

حرکت روی مسیر

دگرگونی فقط خط راست می‌رود و منحنی ابزار دیگری می‌خواهد. مسیر حرکت به عنصر مسیری برای پیمودن می‌دهد، ساده‌ترین‌اش path('M 0 40 C 60 -40, 120 120, 200 40') با دستورهای یک مسیر SVG. فاصله مسیر می‌گوید عنصر چقدر روی مسیر پیش رفته، از 0% تا 100%، و همین مقداری است که پویانمایی می‌شود. چرخش مسیر تعیین می‌کند رویش به کدام سو باشد: auto مثل ماشین مسیر را دنبال می‌کند و یک زاویه آن را ثابت نگه می‌دارد. لنگر حرکت نقطه‌ای از عنصر را که روی مسیر می‌نشیند برمی‌گزیند و موقعیت حرکت نقطه‌ی آغاز شکل‌هایی را که به آن نیاز دارند. حرکت مسیر چند تا از آن‌ها را یکجا می‌گذارد.

صفحه:
    عنوان = "حرکت روی مسیر"
    سبک: محتوا = "@keyframes drive { to { offset-distance: 100% } }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 30 پایان
    جعبه:
        ارتفاع = 130
        عرض = 260
        فاصله = "40 0 0 20"
        اندازه جعبه = "border-box"
        کادر = "1px dashed #94a3b8"
        جعبه:
            عرض = 28
            ارتفاع = 20
            پس زمینه = "#f59e0b"
            مسیر برش = "polygon(0 0, 100% 50%, 0 100%)"
            مسیر حرکت = "path('M 0 40 C 60 -40, 120 120, 200 40')"
            چرخش مسیر = auto
            پویانمایی = "drive 3s ease-in-out infinite alternate"
        پایان
    پایان
پایان

پیکان جعبه‌ای است که با مسیر برش بریده شده و فاصله‌اش در قاب‌ها از ۰ تا ۱۰۰ درصد می‌رود، با alternate رفت‌وبرگشتی. چرخش پیکان از چرخش مسیر = auto می‌آید.

پویانمایی با پیمایش

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

صفحه:
    عنوان = "نوار پیشرفت خواندن"
    سبک: محتوا = "@keyframes fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 ارتفاع خط = 1.9 پایان
    جعبه:
        موقعیت = fixed
        بالا = 0
        چپ = 0
        عرض = "100%"
        ارتفاع = 6
        پس زمینه = "#0f766e"
        مبدا دگرگونی = "0 50%"
        نام پویانمایی = fill
        تابع زمان‌بندی پویانمایی = linear
        خط زمان پویانمایی = "scroll()"
    پایان
    جعبه:
        فاصله = 24
        سرتیتر: اندازه = 2 محتوا = "پایین بروید" پایان
        پاراگراف: تکرار = 14 محتوا = "نوار بالای صفحه با جای پیمایش بزرگ می‌شود. هیچ برنامه‌ای پیمایش را نمی‌خواند، مرورگر پویانمایی را به آن وصل می‌کند." پایان
    پایان
پایان

view() پیشرفت خود عنصر در گذر از پیمایشگر است: وقتی عنصر شروع به وارد شدن می‌کند آغاز می‌شود و وقتی کاملاً رفته پایان می‌یابد. بازه پویانمایی بخشی را که به حساب می‌آید برمی‌گزیند، با نام‌هایی مثل entry (هنگام ورود)، exit، contain و cover (کل مسیر)، هر کدام با درصد. آغاز بازه پویانمایی و انتهای بازه پویانمایی دو سر را جدا تعیین می‌کنند. صفحه‌ی زیر را پیمایش کنید: هر جعبه همان‌طور که وارد می‌شود پیدا می‌شود و وقتی کاملاً وارد شد کار تمام است.

صفحه:
    عنوان = "نمایان شدن با پیمایش"
    سبک: محتوا = "@keyframes show { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: none } }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    سرتیتر: اندازه = 2 محتوا = "پایین بروید" پایان
    جعبه:
        ارتفاع = 160
        فضا = "0 0 40"
        فاصله = 16
        پس زمینه = "#e0f2fe"
        گردی کادر = 10
        نام پویانمایی = show
        تابع زمان‌بندی پویانمایی = linear
        حالت پرکردن پویانمایی = both
        خط زمان پویانمایی = "view()"
        بازه پویانمایی = "entry 0% entry 100%"
        تکرار = 6
        محتوا = "همین که وارد صفحه می‌شوم کم‌کم پیدا می‌شوم"
    پایان
پایان

وقتی دو عنصر تو در تو نیستند، یکی می‌تواند خط زمان دیگری را با نام بخواند. نام خط زمان پیمایش و محور خط زمان پیمایش (یا میان‌بُر خط زمان پیمایش) به پیشرفت یک پیمایشگر نامی می‌دهند که با دو خط تیره شروع می‌شود؛ نام خط زمان دید، محور خط زمان دید و فرورفتگی خط زمان دید (یا خط زمان دید) همین را برای پیشرفت یک عنصر می‌کنند؛ و خط زمان پویانمایی = "--name" آن را به کار می‌برد. نام فقط برای نوادگان عنصری که تعریفش می‌کند دیده می‌شود، و دامنه خط زمان روی نیای مشترک این محدودیت را برمی‌دارد. فرورفتگی خط زمان دید ناحیه‌ی دیده‌شده را از بالا و پایین چند پیکسل کوچک می‌کند.

گذار نما

گذار نما (view transition) تغییر صفحه را، حتی تغییر بزرگ را، تقریباً بی‌زحمت شما پویانمایی می‌کند. برنامه document.startViewTransition(f) را با تابعی که صفحه را عوض می‌کند صدا می‌زند. مرورگر از صفحه‌ی قدیم عکس می‌گیرد، f را اجرا می‌کند، از صفحه‌ی جدید عکس می‌گیرد و میانشان محو و آشکار می‌کند. عنصری که نام گذار نما دارد جداگانه رفتار می‌شود: عکس قدیم و جدیدش از جا و اندازه‌ی قدیم به جدید می‌روند و بزرگ و کوچک می‌شوند، پس انگار سفر می‌کند. نام باید در آن لحظه در صفحه یکتا باشد. کلاس گذار دید به چند عنصر یک نام کلاس می‌دهد تا یک قاعده بتواند گذار همه‌شان را سبک دهد.

صفحه:
    عنوان = "گذار نما"
    سبک: محتوا = ".wide { width: 240px !important; height: 100px !important; background: #f59e0b !important } ::view-transition-group(tile) { animation-duration: 500ms }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 30 پایان
    جعبه:
        شناسه = "tile"
        عرض = 80
        ارتفاع = 80
        پس زمینه = "#0f766e"
        گردی کادر = 12
        نام گذار نما = tile
    پایان
    دکمه: فضا بالا = 16 کلیک = "var f = function () { document.getElementById('tile').classList.toggle('wide') }; if (document.startViewTransition) { document.startViewTransition(f) } else { f() }" محتوا = "تغییر شکل" پایان
پایان

برنامه روی کاشی کلاس را عوض می‌کند و مرورگر آن را از کوچک و سبز به بزرگ و نارنجی پویانمایی می‌کند. قاعده‌ی خام روی ::view-transition-group(tile) حرکت را ۵۰۰ میلی‌ثانیه طول می‌دهد. برنامه نخست می‌پرسد مرورگر startViewTransition دارد یا نه: در مرورگری که ندارد تغییر یکباره رخ می‌دهد. گذار نما در مرورگرهای تازه‌ی کرومیوم و سافاری هست.

پویانمایی تا auto

پنلی که تا بلندی متنش باز می‌شود نمونه‌ی کلاسیکی است که CSS نمی‌توانست پویانمایی‌اش کند: ارتفاع auto عدد نیست و میان ۰ و auto چیزی نبود. میان‌یابی اندازه = "allow-keywords" این را ممکن می‌کند، برای auto، min-content، max-content و fit-content. ویژگی ارث‌بر است، پس یک قاعده روی :root آن را برای صفحه روشن می‌کند، همان‌طور که نمونه با یک قاعده‌ی سراسری می‌کند. در مرورگری که آن را نمی‌شناسد پنل باز می‌شود اما یکباره.

واردسازی دام

ناپایا باز := نادرست

تابع تعویض():
    باز = وارونه باز
    اگر باز:
        دام.تنظیم سبک(دام.با شناسه("panel"), "height", "auto")
    وگرنه:
        دام.تنظیم سبک(دام.با شناسه("panel"), "height", "0")
    پایان
پایان

صفحه:
    عنوان = "پویانمایی تا auto"
    سراسری: گزینشگر = ":root" میان‌یابی اندازه = "allow-keywords" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 24 پایان
    دکمه: کلیک = تعویض محتوا = "نمایش جزئیات" پایان
    جعبه:
        شناسه = "panel"
        ارتفاع = 0
        سرریز = hidden
        گذار = "height 400ms ease"
        پاراگراف: فضا = "12 0" محتوا = "پنل به اندازه‌ی متنش بلند است. ارتفاعش از ۰ به auto می‌رود، کاری که CSS پیش‌تر نمی‌توانست پویانمایی کند." پایان
    پایان
پایان

کاهش حرکت

برای بعضی‌ها حرکت بزرگ، پارالکس و چرخش سرگیجه و تهوع می‌آورد. سیستم‌عامل‌ها تنظیمی برایش دارند و مرورگرها آن را به شکل پرس‌وجوی رسانه‌ی prefers-reduced-motion به صفحه‌ی شما می‌رسانند. رعایتش بخشی از ساختن صفحه است و چند خط بیشتر خرج ندارد.

صفحه:
    عنوان = "احترام به کاهش حرکت"
    سبک: محتوا = "@keyframes pulse { 50% { transform: scale(1.25); opacity: 0.6 } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 30 پایان
    جعبه:
        عرض = 40
        ارتفاع = 40
        گردی کادر = "50%"
        پس زمینه = "#be123c"
        پویانمایی = "pulse 1.2s ease-in-out infinite"
    پایان
    پاراگراف: محتوا = "این نقطه می‌تپد، مگر اینکه دستگاه شما کاهش حرکت را خواسته باشد." پایان
پایان

قاعده‌ی خام آخر سبک می‌گوید وقتی کاربر حرکت کمتر خواسته، هر پویانمایی و گذار خاموش باشد. !important دارد تا بر قاعده‌هایی که مترجم بعدتر می‌نویسد هم بچربد. ابزاری زمخت و گام اول خوبی است. ابزار ظریف‌تر معنا را نگه می‌دارد و حرکت را برمی‌دارد: پنلی که می‌لغزید می‌تواند محو و آشکار شود و سفر دراز می‌تواند کوتاه شود. همین پرس‌وجو تصمیم می‌گیرد رفتار پیمایش = smooth از درس پیش اصلاً روشن باشد یا نه. هر تنظیمی که کاربر داشته باشد، هرگز نگذارید چیزی بیش از سه بار در ثانیه چشمک بزند.

مرجع: ویژگی‌های گذار، دگرگونی و پویانمایی

ویژگی‌ها در گروه‌هایی‌اند. هر نمونه را مترجم بررسی کرده است، پس می‌توانید آن را درون یک بلوک صفحه: بگذارید، و نمونه‌هایی که نامی مثل spin دارند قاعده‌ی @keyframes هم‌نام را در یک عنصر سبک لازم دارند، مثل درس‌های بالا. مقدارهای پذیرفته شده میان قلاب پس از هر توضیح هستند.

گذار

دگرگونی و سه‌بعدی

پویانمایی

حرکت روی مسیر

پویانمایی با پیمایش

کارایی، گذار نما و اندازه‌ها

خودتان امتحان کنید

• دکمه‌ی منویی بسازید که نمادش وقتی فشرده می‌شود ۹۰ درجه بچرخد، با گذار و برنامه‌ای که چرخش را عوض کند.
• نمونه‌ی نقطه‌ها را به پنج نقطه، مدت ۰٫۸ ثانیه و cubic-bezier(0.34, 1.56, 0.64, 1) تغییر دهید. اگر alternate را بردارید چه عوض می‌شود؟
• نشانگری بنویسید که می‌چرخد و دکمه‌ای که آن را می‌ایستاند. بعد قاعده‌ی کاهش حرکت را اضافه کنید و با عوض کردن تنظیم سیستمتان آزمایشش کنید.
• صفحه‌ای بلند بسازید و به هر بخشش پویانمایی نمایان‌شدن با view() بدهید. بررسی کنید در مرورگری که اجرایش نمی‌کند هم صفحه کاملاً خواناست.