/* libs/animate-effects-static.css — vendored từ final-ffmpeg-sdk/www/animate-effects-static.css. * Dùng cho 3 tab In/Out/Attention của #texteffectsGrid (overlay-filter.js) và cho export sau này * (final-ffmpeg-sdk đọc lại đúng các class animate_in_/animate_out_/animate_attention_ này qua * computed style). * * SỬA CỤC BỘ (KHÁC file gốc final-ffmpeg-sdk): bản gốc dùng 2 keyframe DÙNG CHUNG (anim-enter/ * anim-exit) tham số hoá bằng biến CSS variable --anim-from/--anim-mid/--anim-to trên từng class. * Cách này lỗi khi 1 class animate_in_ và 1 class animate_out_ cùng có mặt trên 1 phần tử (để add * cả 3 class in/attention/out đồng thời, dùng animation-delay stagger thay vì add/remove class theo * phase — xem overlay-filter.js applyAnimationPhase()): CSS cascade chỉ giữ lại 1 bộ giá trị biến * (theo thứ tự khai báo trong file, không phải animation nào đang chạy) → 1 trong 2 animation bị sai * hướng/hình dạng. Để tránh lớp biến dùng chung dễ lỗi này, MỖI class animate_in_ hoặc animate_out_ giờ * có @keyframes RIÊNG, tường minh (không còn --anim-*-from/mid/to hay anim-enter/anim-exit dùng * chung) — giống cách animate_attention_* vốn đã làm. --animate-duration vẫn dùng chung (chỉ là 1 * tốc độ chung cho cả 3 tab, không phải data hình dạng nên không xung đột). * Nếu copy đè lại file gốc từ final-ffmpeg-sdk sau này, PHẢI áp lại việc tách keyframes riêng này. */ /* In and Out */ [class*="animate_in_"], [class*="animate_out_"] { backface-visibility: hidden; will-change: transform, opacity, clip-path; } @keyframes anim-in-left-to-right { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } } .animate_in_left_to_right { animation: anim-in-left-to-right var(--animate-duration, 1s) both; } @keyframes anim-in-right-to-left { 0% { opacity: 1; clip-path: inset(0 0 0 100%); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } } .animate_in_right_to_left { animation: anim-in-right-to-left var(--animate-duration, 1s) both; } @keyframes anim-in-top-to-bottom { 0% { opacity: 1; clip-path: inset(100% 0 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } } .animate_in_top_to_bottom { animation: anim-in-top-to-bottom var(--animate-duration, 1s) both; } @keyframes anim-in-bottom-to-top { 0% { opacity: 1; clip-path: inset(0 0 100% 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } } .animate_in_bottom_to_top { animation: anim-in-bottom-to-top var(--animate-duration, 1s) both; } @keyframes anim-in-back-in-down { 0% { opacity: 0; transform: translate(0, -2.1em) scale(0.7); } 60% { opacity: 1; transform: translate(0, 0.16em) scale(1.03); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_back_in_down { animation: anim-in-back-in-down var(--animate-duration, 1s) both; } @keyframes anim-in-back-in-left { 0% { opacity: 0; transform: translate(-2.1em, 0) scale(0.7); } 60% { opacity: 1; transform: translate(0.16em, 0) scale(1.03); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_back_in_left { animation: anim-in-back-in-left var(--animate-duration, 1s) both; } @keyframes anim-in-back-in-right { 0% { opacity: 0; transform: translate(2.1em, 0) scale(0.7); } 60% { opacity: 1; transform: translate(-0.16em, 0) scale(1.03); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_back_in_right { animation: anim-in-back-in-right var(--animate-duration, 1s) both; } @keyframes anim-in-back-in-up { 0% { opacity: 0; transform: translate(0, 2.1em) scale(0.7); } 60% { opacity: 1; transform: translate(0, -0.16em) scale(1.03); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_back_in_up { animation: anim-in-back-in-up var(--animate-duration, 1s) both; } @keyframes anim-in-bounce-in { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } .animate_in_bounce_in { animation: anim-in-bounce-in var(--animate-duration, 1s) both; } @keyframes anim-in-bounce-in-down { 0% { opacity: 0; transform: translate(0, -2.1em) scale(0.3); } 60% { opacity: 1; transform: translate(0, 0.16em) scale(1.04); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_bounce_in_down { animation: anim-in-bounce-in-down var(--animate-duration, 1s) both; } @keyframes anim-in-bounce-in-left { 0% { opacity: 0; transform: translate(-2.1em, 0) scale(0.3); } 60% { opacity: 1; transform: translate(0.16em, 0) scale(1.04); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_bounce_in_left { animation: anim-in-bounce-in-left var(--animate-duration, 1s) both; } @keyframes anim-in-bounce-in-right { 0% { opacity: 0; transform: translate(2.1em, 0) scale(0.3); } 60% { opacity: 1; transform: translate(-0.16em, 0) scale(1.04); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_bounce_in_right { animation: anim-in-bounce-in-right var(--animate-duration, 1s) both; } @keyframes anim-in-bounce-in-up { 0% { opacity: 0; transform: translate(0, 2.1em) scale(0.3); } 60% { opacity: 1; transform: translate(0, -0.16em) scale(1.04); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_bounce_in_up { animation: anim-in-bounce-in-up var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in { 0% { opacity: 0; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } } .animate_in_fade_in { animation: anim-in-fade-in var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-down { 0% { opacity: 0; transform: translate(0, -1.2em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_down { animation: anim-in-fade-in-down var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-down-big { 0% { opacity: 0; transform: translate(0, -3em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_down_big { animation: anim-in-fade-in-down-big var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-left { 0% { opacity: 0; transform: translate(-1.2em, 0); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_left { animation: anim-in-fade-in-left var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-left-big { 0% { opacity: 0; transform: translate(-3em, 0); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_left_big { animation: anim-in-fade-in-left-big var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-right { 0% { opacity: 0; transform: translate(1.2em, 0); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_right { animation: anim-in-fade-in-right var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-right-big { 0% { opacity: 0; transform: translate(3em, 0); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_right_big { animation: anim-in-fade-in-right-big var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-up { 0% { opacity: 0; transform: translate(0, 1.2em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_up { animation: anim-in-fade-in-up var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-up-big { 0% { opacity: 0; transform: translate(0, 3em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_up_big { animation: anim-in-fade-in-up-big var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-top-left { 0% { opacity: 0; transform: translate(-1.2em, -1.2em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_top_left { animation: anim-in-fade-in-top-left var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-top-right { 0% { opacity: 0; transform: translate(1.2em, -1.2em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_top_right { animation: anim-in-fade-in-top-right var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-bottom-left { 0% { opacity: 0; transform: translate(-1.2em, 1.2em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_bottom_left { animation: anim-in-fade-in-bottom-left var(--animate-duration, 1s) both; } @keyframes anim-in-fade-in-bottom-right { 0% { opacity: 0; transform: translate(1.2em, 1.2em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_fade_in_bottom_right { animation: anim-in-fade-in-bottom-right var(--animate-duration, 1s) both; } @keyframes anim-in-light-speed-in-left { 0% { opacity: 0; transform: translate(-3em, 0) skewX(24deg); } 60% { opacity: 1; transform: translate(0.18em, 0) skewX(-7deg); } 100% { opacity: 1; transform: translate(0, 0) skewX(0deg); } } .animate_in_light_speed_in_left { animation: anim-in-light-speed-in-left var(--animate-duration, 1s) both; } @keyframes anim-in-light-speed-in-right { 0% { opacity: 0; transform: translate(3em, 0) skewX(-24deg); } 60% { opacity: 1; transform: translate(-0.18em, 0) skewX(7deg); } 100% { opacity: 1; transform: translate(0, 0) skewX(0deg); } } .animate_in_light_speed_in_right { animation: anim-in-light-speed-in-right var(--animate-duration, 1s) both; } @keyframes anim-in-rotate-in { 0% { opacity: 0; transform: rotate(-180deg) scale(0.8); } 60% { opacity: 1; transform: rotate(12deg) scale(1.02); } 100% { opacity: 1; transform: rotate(0deg) scale(1); } } .animate_in_rotate_in { animation: anim-in-rotate-in var(--animate-duration, 1s) both; } @keyframes anim-in-rotate-in-down-left { 0% { opacity: 0; transform: translate(-1.15em, -1.15em) rotate(-120deg) scale(0.8); } 60% { opacity: 1; transform: translate(0.1em, 0.1em) rotate(10deg) scale(1.02); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } } .animate_in_rotate_in_down_left { animation: anim-in-rotate-in-down-left var(--animate-duration, 1s) both; } @keyframes anim-in-rotate-in-down-right { 0% { opacity: 0; transform: translate(1.15em, -1.15em) rotate(120deg) scale(0.8); } 60% { opacity: 1; transform: translate(-0.1em, 0.1em) rotate(-10deg) scale(1.02); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } } .animate_in_rotate_in_down_right { animation: anim-in-rotate-in-down-right var(--animate-duration, 1s) both; } @keyframes anim-in-rotate-in-up-left { 0% { opacity: 0; transform: translate(-1.15em, 1.15em) rotate(120deg) scale(0.8); } 60% { opacity: 1; transform: translate(0.1em, -0.1em) rotate(-10deg) scale(1.02); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } } .animate_in_rotate_in_up_left { animation: anim-in-rotate-in-up-left var(--animate-duration, 1s) both; } @keyframes anim-in-rotate-in-up-right { 0% { opacity: 0; transform: translate(1.15em, 1.15em) rotate(-120deg) scale(0.8); } 60% { opacity: 1; transform: translate(-0.1em, -0.1em) rotate(10deg) scale(1.02); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } } .animate_in_rotate_in_up_right { animation: anim-in-rotate-in-up-right var(--animate-duration, 1s) both; } @keyframes anim-in-slide-in-down { 0% { opacity: 0; transform: translate(0, -2em); } 60% { opacity: 1; transform: translate(0, 0.14em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_slide_in_down { animation: anim-in-slide-in-down var(--animate-duration, 1s) both; } @keyframes anim-in-slide-in-left { 0% { opacity: 0; transform: translate(-2em, 0); } 60% { opacity: 1; transform: translate(0.14em, 0); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_slide_in_left { animation: anim-in-slide-in-left var(--animate-duration, 1s) both; } @keyframes anim-in-slide-in-right { 0% { opacity: 0; transform: translate(2em, 0); } 60% { opacity: 1; transform: translate(-0.14em, 0); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_slide_in_right { animation: anim-in-slide-in-right var(--animate-duration, 1s) both; } @keyframes anim-in-slide-in-up { 0% { opacity: 0; transform: translate(0, 2em); } 60% { opacity: 1; transform: translate(0, -0.14em); } 100% { opacity: 1; transform: translate(0, 0); } } .animate_in_slide_in_up { animation: anim-in-slide-in-up var(--animate-duration, 1s) both; } @keyframes anim-in-zoom-in { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } .animate_in_zoom_in { animation: anim-in-zoom-in var(--animate-duration, 1s) both; } @keyframes anim-in-zoom-in-down { 0% { opacity: 0; transform: translate(0, -2em) scale(0.3); } 60% { opacity: 1; transform: translate(0, 0.12em) scale(1.04); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_zoom_in_down { animation: anim-in-zoom-in-down var(--animate-duration, 1s) both; } @keyframes anim-in-zoom-in-left { 0% { opacity: 0; transform: translate(-2em, 0) scale(0.3); } 60% { opacity: 1; transform: translate(0.12em, 0) scale(1.04); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_zoom_in_left { animation: anim-in-zoom-in-left var(--animate-duration, 1s) both; } @keyframes anim-in-zoom-in-right { 0% { opacity: 0; transform: translate(2em, 0) scale(0.3); } 60% { opacity: 1; transform: translate(-0.12em, 0) scale(1.04); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_zoom_in_right { animation: anim-in-zoom-in-right var(--animate-duration, 1s) both; } @keyframes anim-in-zoom-in-up { 0% { opacity: 0; transform: translate(0, 2em) scale(0.3); } 60% { opacity: 1; transform: translate(0, -0.12em) scale(1.04); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } .animate_in_zoom_in_up { animation: anim-in-zoom-in-up var(--animate-duration, 1s) both; } @keyframes anim-jack-in-the-box { 0% { opacity: 0; transform: scale(0.1) rotate(30deg); } 60% { opacity: 1; transform: scale(1.05) rotate(-10deg); } 80% { transform: scale(0.95) rotate(3deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .animate_in_jack_in_the_box { animation: anim-jack-in-the-box var(--animate-duration, 1s) both; } @keyframes anim-in-roll-in { 0% { opacity: 0; transform: translate(-2.25em, 0) rotate(-120deg); } 60% { opacity: 1; transform: translate(0.12em, 0) rotate(10deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg); } } .animate_in_roll_in { animation: anim-in-roll-in var(--animate-duration, 1s) both; } @keyframes anim-out-right-to-left { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 1; clip-path: inset(0 100% 0 0); } } .animate_out_right_to_left { animation: anim-out-right-to-left var(--animate-duration, 1s) both; } @keyframes anim-out-left-to-right { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 100%); } } .animate_out_left_to_right { animation: anim-out-left-to-right var(--animate-duration, 1s) both; } @keyframes anim-out-bottom-to-top { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 1; clip-path: inset(0 0 100% 0); } } .animate_out_bottom_to_top { animation: anim-out-bottom-to-top var(--animate-duration, 1s) both; } @keyframes anim-out-top-to-bottom { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 1; clip-path: inset(100% 0 0 0); } } .animate_out_top_to_bottom { animation: anim-out-top-to-bottom var(--animate-duration, 1s) both; } @keyframes anim-out-back-out-down { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(0, 0.16em) scale(1.03); } 100% { opacity: 0; transform: translate(0, 2.1em) scale(0.7); } } .animate_out_back_out_down { animation: anim-out-back-out-down var(--animate-duration, 1s) both; } @keyframes anim-out-back-out-left { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(-0.16em, 0) scale(1.03); } 100% { opacity: 0; transform: translate(-2.1em, 0) scale(0.7); } } .animate_out_back_out_left { animation: anim-out-back-out-left var(--animate-duration, 1s) both; } @keyframes anim-out-back-out-right { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(0.16em, 0) scale(1.03); } 100% { opacity: 0; transform: translate(2.1em, 0) scale(0.7); } } .animate_out_back_out_right { animation: anim-out-back-out-right var(--animate-duration, 1s) both; } @keyframes anim-out-back-out-up { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(0, -0.16em) scale(1.03); } 100% { opacity: 0; transform: translate(0, -2.1em) scale(0.7); } } .animate_out_back_out_up { animation: anim-out-back-out-up var(--animate-duration, 1s) both; } @keyframes anim-out-bounce-out { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(0.88); } 100% { opacity: 0; transform: scale(0.3); } } .animate_out_bounce_out { animation: anim-out-bounce-out var(--animate-duration, 1s) both; } @keyframes anim-out-bounce-out-down { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(0, 0.16em) scale(0.96); } 100% { opacity: 0; transform: translate(0, 2em) scale(0.3); } } .animate_out_bounce_out_down { animation: anim-out-bounce-out-down var(--animate-duration, 1s) both; } @keyframes anim-out-bounce-out-left { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(-0.16em, 0) scale(0.96); } 100% { opacity: 0; transform: translate(-2em, 0) scale(0.3); } } .animate_out_bounce_out_left { animation: anim-out-bounce-out-left var(--animate-duration, 1s) both; } @keyframes anim-out-bounce-out-right { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(0.16em, 0) scale(0.96); } 100% { opacity: 0; transform: translate(2em, 0) scale(0.3); } } .animate_out_bounce_out_right { animation: anim-out-bounce-out-right var(--animate-duration, 1s) both; } @keyframes anim-out-bounce-out-up { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(0, -0.16em) scale(0.96); } 100% { opacity: 0; transform: translate(0, -2em) scale(0.3); } } .animate_out_bounce_out_up { animation: anim-out-bounce-out-up var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.98); } } .animate_out_fade_out { animation: anim-out-fade-out var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-down { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, 1.2em); } } .animate_out_fade_out_down { animation: anim-out-fade-out-down var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-down-big { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, 3em); } } .animate_out_fade_out_down_big { animation: anim-out-fade-out-down-big var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-left { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-1.2em, 0); } } .animate_out_fade_out_left { animation: anim-out-fade-out-left var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-left-big { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-3em, 0); } } .animate_out_fade_out_left_big { animation: anim-out-fade-out-left-big var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-right { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(1.2em, 0); } } .animate_out_fade_out_right { animation: anim-out-fade-out-right var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-right-big { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(3em, 0); } } .animate_out_fade_out_right_big { animation: anim-out-fade-out-right-big var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-up { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, -1.2em); } } .animate_out_fade_out_up { animation: anim-out-fade-out-up var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-up-big { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, -3em); } } .animate_out_fade_out_up_big { animation: anim-out-fade-out-up-big var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-top-left { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-1.2em, -1.2em); } } .animate_out_fade_out_top_left { animation: anim-out-fade-out-top-left var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-top-right { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(1.2em, -1.2em); } } .animate_out_fade_out_top_right { animation: anim-out-fade-out-top-right var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-bottom-left { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-1.2em, 1.2em); } } .animate_out_fade_out_bottom_left { animation: anim-out-fade-out-bottom-left var(--animate-duration, 1s) both; } @keyframes anim-out-fade-out-bottom-right { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(1.2em, 1.2em); } } .animate_out_fade_out_bottom_right { animation: anim-out-fade-out-bottom-right var(--animate-duration, 1s) both; } @keyframes anim-out-light-speed-out-left { 0% { opacity: 1; transform: translate(0, 0) skewX(0deg); } 40% { opacity: 1; transform: translate(-0.18em, 0) skewX(10deg); } 100% { opacity: 0; transform: translate(-3em, 0) skewX(24deg); } } .animate_out_light_speed_out_left { animation: anim-out-light-speed-out-left var(--animate-duration, 1s) both; } @keyframes anim-out-light-speed-out-right { 0% { opacity: 1; transform: translate(0, 0) skewX(0deg); } 40% { opacity: 1; transform: translate(0.18em, 0) skewX(-10deg); } 100% { opacity: 0; transform: translate(3em, 0) skewX(-24deg); } } .animate_out_light_speed_out_right { animation: anim-out-light-speed-out-right var(--animate-duration, 1s) both; } @keyframes anim-out-rotate-out { 0% { opacity: 1; transform: rotate(0deg) scale(1); } 40% { opacity: 1; transform: rotate(-12deg) scale(0.98); } 100% { opacity: 0; transform: rotate(180deg) scale(0.8); } } .animate_out_rotate_out { animation: anim-out-rotate-out var(--animate-duration, 1s) both; } @keyframes anim-out-rotate-out-down-left { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 40% { opacity: 1; transform: translate(-0.1em, 0.1em) rotate(-10deg) scale(0.98); } 100% { opacity: 0; transform: translate(-1.15em, 1.15em) rotate(-120deg) scale(0.8); } } .animate_out_rotate_out_down_left { animation: anim-out-rotate-out-down-left var(--animate-duration, 1s) both; } @keyframes anim-out-rotate-out-down-right { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 40% { opacity: 1; transform: translate(0.1em, 0.1em) rotate(10deg) scale(0.98); } 100% { opacity: 0; transform: translate(1.15em, 1.15em) rotate(120deg) scale(0.8); } } .animate_out_rotate_out_down_right { animation: anim-out-rotate-out-down-right var(--animate-duration, 1s) both; } @keyframes anim-out-rotate-out-up-left { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 40% { opacity: 1; transform: translate(-0.1em, -0.1em) rotate(10deg) scale(0.98); } 100% { opacity: 0; transform: translate(-1.15em, -1.15em) rotate(120deg) scale(0.8); } } .animate_out_rotate_out_up_left { animation: anim-out-rotate-out-up-left var(--animate-duration, 1s) both; } @keyframes anim-out-rotate-out-up-right { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 40% { opacity: 1; transform: translate(0.1em, -0.1em) rotate(-10deg) scale(0.98); } 100% { opacity: 0; transform: translate(1.15em, -1.15em) rotate(-120deg) scale(0.8); } } .animate_out_rotate_out_up_right { animation: anim-out-rotate-out-up-right var(--animate-duration, 1s) both; } @keyframes anim-out-slide-out-down { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, 2em); } } .animate_out_slide_out_down { animation: anim-out-slide-out-down var(--animate-duration, 1s) both; } @keyframes anim-out-slide-out-left { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-2em, 0); } } .animate_out_slide_out_left { animation: anim-out-slide-out-left var(--animate-duration, 1s) both; } @keyframes anim-out-slide-out-right { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(2em, 0); } } .animate_out_slide_out_right { animation: anim-out-slide-out-right var(--animate-duration, 1s) both; } @keyframes anim-out-slide-out-up { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, -2em); } } .animate_out_slide_out_up { animation: anim-out-slide-out-up var(--animate-duration, 1s) both; } @keyframes anim-out-zoom-out { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(0.92); } 100% { opacity: 0; transform: scale(0.3); } } .animate_out_zoom_out { animation: anim-out-zoom-out var(--animate-duration, 1s) both; } @keyframes anim-out-zoom-out-down { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(0, 0.12em) scale(0.92); } 100% { opacity: 0; transform: translate(0, 2em) scale(0.3); } } .animate_out_zoom_out_down { animation: anim-out-zoom-out-down var(--animate-duration, 1s) both; } @keyframes anim-out-zoom-out-left { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(-0.12em, 0) scale(0.92); } 100% { opacity: 0; transform: translate(-2em, 0) scale(0.3); } } .animate_out_zoom_out_left { animation: anim-out-zoom-out-left var(--animate-duration, 1s) both; } @keyframes anim-out-zoom-out-right { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(0.12em, 0) scale(0.92); } 100% { opacity: 0; transform: translate(2em, 0) scale(0.3); } } .animate_out_zoom_out_right { animation: anim-out-zoom-out-right var(--animate-duration, 1s) both; } @keyframes anim-out-zoom-out-up { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(0, -0.12em) scale(0.92); } 100% { opacity: 0; transform: translate(0, -2em) scale(0.3); } } .animate_out_zoom_out_up { animation: anim-out-zoom-out-up var(--animate-duration, 1s) both; } @keyframes anim-hinge { 0% { opacity: 1; transform: rotate(0deg); } 20% { opacity: 1; transform: rotate(80deg); } 40% { opacity: 1; transform: rotate(60deg); } 60% { opacity: 1; transform: rotate(80deg); } 80% { opacity: 0.6; transform: translateY(0.9em) rotate(80deg); } 100% { opacity: 0; transform: translateY(2.4em) rotate(80deg); } } .animate_out_hinge { animation: anim-hinge var(--animate-duration, 1s) both; transform-origin: top left; } @keyframes anim-out-roll-out { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 40% { opacity: 1; transform: translate(0.12em, 0) rotate(12deg); } 100% { opacity: 0; transform: translate(2.25em, 0) rotate(120deg); } } .animate_out_roll_out { animation: anim-out-roll-out var(--animate-duration, 1s) both; } /* Attention */ .animate_attention_vibrate_1, .animate_attention_vibrate_2, .animate_attention_vibrate_3, .animate_attention_shake_horizontal, .animate_attention_shake_vertical, .animate_attention_shake_lr, .animate_attention_shake_left, .animate_attention_shake_right, .animate_attention_shake_top, .animate_attention_shake_bottom, .animate_attention_shake_tl, .animate_attention_shake_tr, .animate_attention_shake_bl, .animate_attention_shake_br, .animate_attention_jello_horizontal, .animate_attention_jello_vertical, .animate_attention_jello_diagonal_1, .animate_attention_jello_diagonal_2, .animate_attention_wobble_hor_bottom, .animate_attention_wobble_hor_top, .animate_attention_wobble_ver_left, .animate_attention_wobble_ver_right, .animate_attention_bounce_top, .animate_attention_bounce_bottom, .animate_attention_bounce_left, .animate_attention_bounce_right, .animate_attention_pulsate_bck, .animate_attention_pulsate_fwd { transform-origin: center center; backface-visibility: hidden; will-change: transform, opacity; } @keyframes animate-vibrate-1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(-0.12em, -0.05em) rotate(-0.8deg); } 40% { transform: translate(0.12em, 0.05em) rotate(0.8deg); } 60% { transform: translate(-0.08em, 0.03em) rotate(-0.45deg); } 80% { transform: translate(0.08em, -0.03em) rotate(0.45deg); } } .animate_attention_vibrate_1 { animation: animate-vibrate-1 0.65s linear infinite both; } @keyframes animate-vibrate-2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 18% { transform: translate(-0.16em, 0.03em) rotate(-1.1deg); } 36% { transform: translate(0.16em, -0.03em) rotate(1.1deg); } 54% { transform: translate(-0.1em, 0.04em) rotate(-0.65deg); } 72% { transform: translate(0.1em, -0.04em) rotate(0.65deg); } } .animate_attention_vibrate_2 { animation: animate-vibrate-2 0.55s linear infinite both; } @keyframes animate-vibrate-3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 15% { transform: translate(-0.18em, -0.05em) rotate(-1.35deg); } 30% { transform: translate(0.18em, 0.05em) rotate(1.35deg); } 45% { transform: translate(-0.12em, 0.04em) rotate(-0.8deg); } 60% { transform: translate(0.12em, -0.04em) rotate(0.8deg); } 75% { transform: translate(-0.08em, 0.03em) rotate(-0.5deg); } 90% { transform: translate(0.08em, -0.03em) rotate(0.5deg); } } .animate_attention_vibrate_3 { animation: animate-vibrate-3 0.45s linear infinite both; } @keyframes animate-shake-horizontal { 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% { transform: translateX(0) rotate(0deg); } 6.25%, 31.25%, 56.25%, 81.25% { transform: translateX(-0.18em) rotate(-0.5deg); } 18.75%, 43.75%, 68.75%, 93.75% { transform: translateX(0.18em) rotate(0.5deg); } } .animate_attention_shake_horizontal { animation: animate-shake-horizontal 0.85s linear infinite both; } @keyframes animate-shake-vertical { 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% { transform: translateY(0) rotate(0deg); } 6.25%, 31.25%, 56.25%, 81.25% { transform: translateY(-0.18em) rotate(-0.5deg); } 18.75%, 43.75%, 68.75%, 93.75% { transform: translateY(0.18em) rotate(0.5deg); } } .animate_attention_shake_vertical { animation: animate-shake-vertical 0.85s linear infinite both; } @keyframes animate-shake-lr { 0%, 100% { transform: translateX(0) rotate(0deg); } 12%, 36%, 60%, 84% { transform: translateX(-0.14em) rotate(-0.45deg); } 24%, 48%, 72%, 96% { transform: translateX(0.14em) rotate(0.45deg); } } .animate_attention_shake_lr { animation: animate-shake-lr 0.9s linear infinite both; } @keyframes animate-shake-left { 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% { transform: rotate(0deg); } 6.25%, 31.25%, 56.25%, 81.25% { transform: translateX(-0.18em) rotate(-0.5deg); } 18.75%, 43.75%, 68.75%, 93.75% { transform: translateX(0.03em) rotate(0.25deg); } } .animate_attention_shake_left { animation: animate-shake-left 0.9s linear infinite both; } @keyframes animate-shake-right { 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% { transform: rotate(0deg); } 6.25%, 31.25%, 56.25%, 81.25% { transform: translateX(0.18em) rotate(0.5deg); } 18.75%, 43.75%, 68.75%, 93.75% { transform: translateX(-0.03em) rotate(-0.25deg); } } .animate_attention_shake_right { animation: animate-shake-right 0.9s linear infinite both; } @keyframes animate-shake-top { 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% { transform: rotate(0deg); } 6.25%, 31.25%, 56.25%, 81.25% { transform: translateY(-0.18em) rotate(-0.5deg); } 18.75%, 43.75%, 68.75%, 93.75% { transform: translateY(0.03em) rotate(0.25deg); } } .animate_attention_shake_top { animation: animate-shake-top 0.9s linear infinite both; } @keyframes animate-shake-bottom { 0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% { transform: rotate(0deg); } 6.25%, 31.25%, 56.25%, 81.25% { transform: translateY(0.18em) rotate(0.5deg); } 18.75%, 43.75%, 68.75%, 93.75% { transform: translateY(-0.03em) rotate(-0.25deg); } } .animate_attention_shake_bottom { animation: animate-shake-bottom 0.9s linear infinite both; } @keyframes animate-shake-tl { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 16% { transform: translate(-0.15em, -0.15em) rotate(-0.6deg); } 32% { transform: translate(0.15em, 0.15em) rotate(0.6deg); } 48% { transform: translate(-0.09em, -0.09em) rotate(-0.35deg); } 64% { transform: translate(0.09em, 0.09em) rotate(0.35deg); } } .animate_attention_shake_tl { animation: animate-shake-tl 0.85s linear infinite both; } @keyframes animate-shake-tr { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 16% { transform: translate(0.15em, -0.15em) rotate(0.6deg); } 32% { transform: translate(-0.15em, 0.15em) rotate(-0.6deg); } 48% { transform: translate(0.09em, -0.09em) rotate(0.35deg); } 64% { transform: translate(-0.09em, 0.09em) rotate(-0.35deg); } } .animate_attention_shake_tr { animation: animate-shake-tr 0.85s linear infinite both; } @keyframes animate-shake-bl { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 16% { transform: translate(-0.15em, 0.15em) rotate(-0.6deg); } 32% { transform: translate(0.15em, -0.15em) rotate(0.6deg); } 48% { transform: translate(-0.09em, 0.09em) rotate(-0.35deg); } 64% { transform: translate(0.09em, -0.09em) rotate(0.35deg); } } .animate_attention_shake_bl { animation: animate-shake-bl 0.85s linear infinite both; } @keyframes animate-shake-br { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 16% { transform: translate(0.15em, 0.15em) rotate(0.6deg); } 32% { transform: translate(-0.15em, -0.15em) rotate(-0.6deg); } 48% { transform: translate(0.09em, 0.09em) rotate(0.35deg); } 64% { transform: translate(-0.09em, -0.09em) rotate(-0.35deg); } } .animate_attention_shake_br { animation: animate-shake-br 0.85s linear infinite both; } @keyframes animate-jello-horizontal { 0%, 100% { transform: scale(1) skewX(0deg); } 22% { transform: scaleX(1.16) scaleY(0.92) skewX(6deg); } 44% { transform: scaleX(0.96) scaleY(1.04) skewX(-4deg); } 66% { transform: scaleX(1.03) scaleY(0.98) skewX(2deg); } 84% { transform: scaleX(0.995) scaleY(1.005) skewX(-1deg); } } .animate_attention_jello_horizontal { animation: animate-jello-horizontal 0.95s linear infinite both; } @keyframes animate-jello-vertical { 0%, 100% { transform: scale(1) skewY(0deg); } 22% { transform: scaleX(0.92) scaleY(1.16) skewY(6deg); } 44% { transform: scaleX(1.04) scaleY(0.96) skewY(-4deg); } 66% { transform: scaleX(0.98) scaleY(1.03) skewY(2deg); } 84% { transform: scaleX(1.005) scaleY(0.995) skewY(-1deg); } } .animate_attention_jello_vertical { animation: animate-jello-vertical 0.95s linear infinite both; } @keyframes animate-jello-diagonal-1 { 0%, 100% { transform: scale(1) skewX(0deg) skewY(0deg); } 22% { transform: scale(1.1, 0.92) skewX(6deg) skewY(-6deg); } 44% { transform: scale(0.96, 1.04) skewX(-4deg) skewY(4deg); } 66% { transform: scale(1.03, 0.98) skewX(2deg) skewY(-2deg); } 84% { transform: scale(0.995, 1.005) skewX(-1deg) skewY(1deg); } } .animate_attention_jello_diagonal_1 { animation: animate-jello-diagonal-1 1s linear infinite both; } @keyframes animate-jello-diagonal-2 { 0%, 100% { transform: scale(1) skewX(0deg) skewY(0deg); } 22% { transform: scale(1.1, 0.92) skewX(-6deg) skewY(6deg); } 44% { transform: scale(0.96, 1.04) skewX(4deg) skewY(-4deg); } 66% { transform: scale(1.03, 0.98) skewX(-2deg) skewY(2deg); } 84% { transform: scale(0.995, 1.005) skewX(1deg) skewY(-1deg); } } .animate_attention_jello_diagonal_2 { animation: animate-jello-diagonal-2 1s linear infinite both; } @keyframes animate-wobble-hor-bottom { 0%, 100% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(-1.5deg) translateY(0.06em); } 40% { transform: rotate(1.1deg) translateY(-0.04em); } 60% { transform: rotate(-0.75deg) translateY(0.03em); } 80% { transform: rotate(0.45deg) translateY(-0.015em); } } .animate_attention_wobble_hor_bottom { animation: animate-wobble-hor-bottom 1s linear infinite both; transform-origin: 50% 100%; } @keyframes animate-wobble-hor-top { 0%, 100% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(1.5deg) translateY(-0.06em); } 40% { transform: rotate(-1.1deg) translateY(0.04em); } 60% { transform: rotate(0.75deg) translateY(-0.03em); } 80% { transform: rotate(-0.45deg) translateY(0.015em); } } .animate_attention_wobble_hor_top { animation: animate-wobble-hor-top 1s linear infinite both; transform-origin: 50% 0; } @keyframes animate-wobble-ver-left { 0%, 100% { transform: rotate(0deg) translateX(0); } 20% { transform: rotate(-1.5deg) translateX(-0.06em); } 40% { transform: rotate(1.1deg) translateX(0.04em); } 60% { transform: rotate(-0.75deg) translateX(-0.03em); } 80% { transform: rotate(0.45deg) translateX(0.015em); } } .animate_attention_wobble_ver_left { animation: animate-wobble-ver-left 1s linear infinite both; transform-origin: 0 50%; } @keyframes animate-wobble-ver-right { 0%, 100% { transform: rotate(0deg) translateX(0); } 20% { transform: rotate(1.5deg) translateX(0.06em); } 40% { transform: rotate(-1.1deg) translateX(-0.04em); } 60% { transform: rotate(0.75deg) translateX(0.03em); } 80% { transform: rotate(-0.45deg) translateX(-0.015em); } } .animate_attention_wobble_ver_right { animation: animate-wobble-ver-right 1s linear infinite both; transform-origin: 100% 50%; } @keyframes animate-bounce-top { 0%, 50%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-0.24em) scale(1.08, 0.94); } 75% { transform: translateY(0.03em) scale(0.98, 1.02); } } .animate_attention_bounce_top { animation: animate-bounce-top 1s linear infinite both; } @keyframes animate-bounce-bottom { 0%, 50%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(0.24em) scale(1.08, 0.94); } 75% { transform: translateY(-0.03em) scale(0.98, 1.02); } } .animate_attention_bounce_bottom { animation: animate-bounce-bottom 1s linear infinite both; } @keyframes animate-bounce-left { 0%, 50%, 100% { transform: translateX(0) scale(1); } 25% { transform: translateX(-0.24em) scale(0.94, 1.08); } 75% { transform: translateX(0.03em) scale(1.02, 0.98); } } .animate_attention_bounce_left { animation: animate-bounce-left 1s linear infinite both; } @keyframes animate-bounce-right { 0%, 50%, 100% { transform: translateX(0) scale(1); } 25% { transform: translateX(0.24em) scale(0.94, 1.08); } 75% { transform: translateX(-0.03em) scale(1.02, 0.98); } } .animate_attention_bounce_right { animation: animate-bounce-right 1s linear infinite both; } @keyframes animate-pulsate-bck { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(0.88); opacity: 0.94; } 72% { transform: scale(0.98); opacity: 0.99; } } .animate_attention_pulsate_bck { animation: animate-pulsate-bck 0.9s linear infinite both; } @keyframes animate-pulsate-fwd { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.12); opacity: 0.94; } 72% { transform: scale(1.03); opacity: 0.99; } } .animate_attention_pulsate_fwd { animation: animate-pulsate-fwd 0.9s linear infinite both; }