/** * Hệ chuyển động dùng chung cho CoMo: hiện dần khi cuộn tới, cuộn mượt, * ảnh hiện dần khi tải xong, chuyển trang có fade. * * Nguyên tắc: * 1. KHÔNG BAO GIỜ giấu nội dung khi JavaScript hỏng. Mọi quy tắc ẩn đều * nằm sau class .cm-motion mà cm-motion.js tự gắn vào . Không có * JS thì trang hiện đầy đủ ngay, chỉ là không có hiệu ứng. * 2. Tôn trọng prefers-reduced-motion tuyệt đối — tắt sạch, không rút ngắn. * Người bật cờ đó thường vì chóng mặt hoặc rối loạn tiền đình, "nhanh * hơn một chút" không giúp gì. * 3. Chuyển động ngắn và một chiều: 380ms, dịch lên 14px. Đủ để mắt bắt * được nhịp, không đủ để phải chờ. */ html { scroll-behavior: smooth; } /* ---- hiện dần khi cuộn tới ---------------------------------------- */ .cm-motion [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .38s cubic-bezier(.22,.61,.36,1), transform .38s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .cm-motion [data-reveal].is-in { opacity: 1; transform: none; } /* Xếp lệch nhẹ cho các phần tử trong cùng một hàng (thẻ, ô, mục lưới). */ .cm-motion [data-reveal][style*="--d:"] { transition-delay: var(--d); } /* ---- ảnh hiện dần khi tải xong ------------------------------------- */ .cm-motion img[data-fade] { opacity: 0; transition: opacity .45s ease; } .cm-motion img[data-fade].is-loaded { opacity: 1; } /* ---- chuyển trang --------------------------------------------------- Fade-in luôn có; fade-out chỉ chạy khi bấm một liên kết nội bộ bình thường. Có chốt an toàn 400ms trong JS để không bao giờ kẹt ở màn trắng nếu điều hướng bị huỷ. */ .cm-motion body { animation: cm-page-in .28s ease both; } .cm-motion body.cm-leaving { opacity: 0; transition: opacity .11s ease; } @keyframes cm-page-in { from { opacity: 0; } to { opacity: 1; } } /* ---- vi chuyển động cho các thành phần hay chạm ---------------------- */ body.cm-theme .cm-tile img, body.cm-theme .cm-rail-item img, body.cm-theme .cmb-card img { transition: filter .25s ease, transform .35s cubic-bezier(.22,.61,.36,1); } body.cm-theme .cm-tile:hover img, body.cm-theme .cmb-card:hover img { transform: scale(1.015); } body.cm-theme .cm-quad-cell, body.cm-theme .cm-index a, body.cm-theme .cm-az-list a { transition: background-color .18s ease, color .18s ease; } body.cm-theme .cm-btn, body.cm-theme .cm-more { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } /* ---- tắt sạch khi người dùng yêu cầu giảm chuyển động --------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cm-motion [data-reveal], .cm-motion [data-reveal].is-in { opacity: 1; transform: none; transition: none; } .cm-motion img[data-fade] { opacity: 1; transition: none; } .cm-motion body, .cm-motion body.cm-leaving { animation: none; opacity: 1; transition: none; } body.cm-theme .cm-tile:hover img, body.cm-theme .cmb-card:hover img { transform: none; } }