/* Hover motion, scoped per icon under .mi-<name>; nothing loops — GENERATED by scripts/build-lucide-moving.mjs, do not edit.
   Shapes: Lucide (ISC, lucide.dev). Motion: movingicons.dev (MIT, github.com/jis3r/icons). */
.mi-triangle-alert .animate-icon { animation: mi-triangle-alert-primaryAnimation 0.5s ease-in-out; } @keyframes mi-triangle-alert-primaryAnimation { 0% { transform: scale(1) rotate(0deg); } 20% { transform: scale(1.1) rotate(-3deg); } 40% { transform: scale(1.1) rotate(3deg); } 60% { transform: scale(1.1) rotate(-2deg); } 100% { transform: scale(1) rotate(0deg); } }
.mi-square-x .square-x-icon { overflow: visible; } .mi-square-x .diagonal-1, .mi-square-x .diagonal-2 { stroke-dasharray: 8.5; stroke-dashoffset: 0; transition: stroke-dashoffset 0.15s ease-out; } .mi-square-x .square-x-icon.animate .diagonal-1 { opacity: 0; animation: mi-square-x-lineAnimation 0.3s ease-out forwards; } .mi-square-x .square-x-icon.animate .diagonal-2 { opacity: 0; animation: mi-square-x-lineAnimation 0.3s ease-out 0.25s forwards; } @keyframes mi-square-x-lineAnimation { 0% { opacity: 0; stroke-dashoffset: 8.5; } 15% { opacity: 1; stroke-dashoffset: 8.5; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.mi-square-check .square-check-icon { overflow: visible; } .mi-square-check .check-path { stroke-dasharray: 9; stroke-dashoffset: 0; transition: stroke-dashoffset 0.125s ease-out, opacity 0.125s ease-out; } .mi-square-check .square-check-icon.animate .check-path { animation: mi-square-check-checkAnimation 0.5s ease-out backwards; } @keyframes mi-square-check-checkAnimation { 0% { stroke-dashoffset: 9; opacity: 0; } 33% { stroke-dashoffset: 9; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-shield-check .shield-check-icon { overflow: visible; } .mi-shield-check .check-path { stroke-dasharray: 9; stroke-dashoffset: 0; transition: stroke-dashoffset 0.125s ease-out, opacity 0.125s ease-out; } .mi-shield-check .shield-check-icon.animate .check-path { animation: mi-shield-check-checkAnimation 0.5s ease-out backwards; } @keyframes mi-shield-check-checkAnimation { 0% { stroke-dashoffset: 9; opacity: 0; } 33% { stroke-dashoffset: 9; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-shield-x .shield-x-icon { overflow: visible; } .mi-shield-x .diagonal-1, .mi-shield-x .diagonal-2 { stroke-dasharray: 7.1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.15s ease-out; } .mi-shield-x .shield-x-icon.animate .diagonal-1 { opacity: 0; animation: mi-shield-x-lineAnimation 0.3s ease-out forwards; } .mi-shield-x .shield-x-icon.animate .diagonal-2 { opacity: 0; animation: mi-shield-x-lineAnimation 0.3s ease-out 0.25s forwards; } @keyframes mi-shield-x-lineAnimation { 0% { opacity: 0; stroke-dashoffset: 7.1; } 15% { opacity: 1; stroke-dashoffset: 7.1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.mi-file-x .file-x-icon { overflow: visible; } .mi-file-x .diagonal-1, .mi-file-x .diagonal-2 { stroke-dasharray: 7.5; stroke-dashoffset: 0; transition: stroke-dashoffset 0.15s ease-out; } .mi-file-x .file-x-icon.animate .diagonal-1 { opacity: 0; animation: mi-file-x-lineAnimation 0.3s ease-out forwards; } .mi-file-x .file-x-icon.animate .diagonal-2 { opacity: 0; animation: mi-file-x-lineAnimation 0.3s ease-out 0.25s forwards; } @keyframes mi-file-x-lineAnimation { 0% { opacity: 0; stroke-dashoffset: 7.5; } 15% { opacity: 1; stroke-dashoffset: 7.5; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.mi-file-minus .file-minus { overflow: visible; } .mi-file-minus .horizontal { stroke-dasharray: 8; stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s ease-out; } .mi-file-minus .file-minus.animate .horizontal { opacity: 0; animation: mi-file-minus-lineAnimation 0.5s ease-out forwards; } @keyframes mi-file-minus-lineAnimation { 0% { opacity: 0; stroke-dashoffset: 8; } 15% { opacity: 1; stroke-dashoffset: 8; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.mi-user .user-path, .mi-user .user-circle { transition: transform 0.6s ease-in-out; } .mi-user .user-icon.animate .user-path { animation: mi-user-pathBounce 0.6s ease-in-out; } .mi-user .user-icon.animate .user-circle { animation: mi-user-circleBounce 0.6s ease-in-out; } @keyframes mi-user-pathBounce { 0% { transform: translateY(0); } 33% { transform: translateY(2px); } 66% { transform: translateY(-2px); } 100% { transform: translateY(0); } } @keyframes mi-user-circleBounce { 0% { transform: translateY(0); } 33% { transform: translateY(4px); } 66% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
.mi-users .users-path1, .mi-users .users-path2, .mi-users .users-path3, .mi-users .users-circle { transition: transform 0.6s ease-in-out; } .mi-users .users-icon.animate .users-path1 { animation: mi-users-path1Bounce 0.6s ease-in-out; animation-delay: 0.1s; } .mi-users .users-icon.animate .users-path2 { animation: mi-users-path2Bounce 0.6s ease-in-out; } .mi-users .users-icon.animate .users-path3 { animation: mi-users-path3Bounce 0.6s ease-in-out; } .mi-users .users-icon.animate .users-circle { animation: mi-users-circleBounce 0.6s ease-in-out; animation-delay: 0.1s; } @keyframes mi-users-path1Bounce { 0% { transform: translateY(0); } 33% { transform: translateY(2px); } 66% { transform: translateY(-2px); } 100% { transform: translateY(0); } } @keyframes mi-users-path2Bounce { 0% { transform: translateY(0); } 33% { transform: translateY(4px); } 66% { transform: translateY(-2px); } 100% { transform: translateY(0); } } @keyframes mi-users-path3Bounce { 0% { transform: translateY(0); } 33% { transform: translateY(2px); } 66% { transform: translateY(-2px); } 100% { transform: translateY(0); } } @keyframes mi-users-circleBounce { 0% { transform: translateY(0); } 33% { transform: translateY(4px); } 66% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
.mi-users-round .users-round-path1, .mi-users-round .users-round-path2, .mi-users-round .users-round-circle { transition: transform 0.6s ease-in-out; } .mi-users-round .users-round-icon.animate .users-round-path1 { animation: mi-users-round-path1Bounce 0.6s ease-in-out; animation-delay: 0.1s; } .mi-users-round .users-round-icon.animate .users-round-path2 { animation: mi-users-round-path2Bounce 0.6s ease-in-out; } .mi-users-round .users-round-icon.animate .users-round-circle { animation: mi-users-round-circleBounce 0.6s ease-in-out; animation-delay: 0.1s; } @keyframes mi-users-round-path1Bounce { 0% { transform: translateY(0); } 33% { transform: translateY(4px); } 66% { transform: translateY(-2px); } 100% { transform: translateY(0); } } @keyframes mi-users-round-path2Bounce { 0% { transform: translateY(0); } 33% { transform: translateY(1px); } 66% { transform: translateY(-2px); } 100% { transform: translateY(0); } } @keyframes mi-users-round-circleBounce { 0% { transform: translateY(0); } 33% { transform: translateY(1px); } 66% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
.mi-briefcase .briefcase-icon { transform-origin: top center; transform-box: fill-box; } .mi-briefcase .briefcase-icon.animate { animation: mi-briefcase-swing 0.8s ease-in-out; } @keyframes mi-briefcase-swing { 0% { transform: rotate(0deg); } 25% { transform: rotate(12deg); } 55% { transform: rotate(-10deg); } 85% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } }
.mi-heart .heart-icon { overflow: visible; } .mi-heart .heart-path { transform-origin: center; transition: transform 0.3s ease; } .mi-heart .heart-icon.animate .heart-path { animation: mi-heart-heartBeat 1.2s ease-in-out; } @keyframes mi-heart-heartBeat { 0% { transform: scale(1); } 16.67% { transform: scale(1.1); } 33.33% { transform: scale(1); } 50% { transform: scale(1.1); } 66.67% { transform: scale(1); } 83.33% { transform: scale(1.1); } 100% { transform: scale(1); } }
.mi-user-cog .cog-group { transform-origin: 18px 15px; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .mi-user-cog .cog-group.animate { transform: rotate(180deg); }
.mi-award .award-icon { transform-origin: center; transition: all 0.5s ease-in-out; } .mi-award .award-icon.animate { animation: mi-award-enlarge 1s ease; } @keyframes mi-award-enlarge { 30% { transform: rotate(20deg) scale(1.2); } 60% { transform: rotate(-20deg) scale(1.2); } 1000% { transform: rotate(0deg) scale(1); } }
.mi-file-text .file-text-icon { overflow: visible; } .mi-file-text .text-line { stroke-dasharray: 12; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease, opacity 0.3s ease; } .mi-file-text .file-text-icon.animate .text-line { animation: mi-file-text-textLineAnimation 0.6s ease forwards; } .mi-file-text .file-text-icon.animate .text-line-1 { animation-delay: 0s; } .mi-file-text .file-text-icon.animate .text-line-2 { animation-delay: 0.1s; } .mi-file-text .file-text-icon.animate .text-line-3 { animation-delay: 0.2s; } @keyframes mi-file-text-textLineAnimation { 0% { stroke-dashoffset: 0; opacity: 1; } 50% { stroke-dashoffset: 12; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-file-plus .file-plus { overflow: visible; } .mi-file-plus .horizontal, .mi-file-plus .vertical { stroke-dasharray: 8; stroke-dashoffset: 0; transition: stroke-dashoffset 0.15s ease-out; } .mi-file-plus .file-plus.animate .horizontal { opacity: 0; animation: mi-file-plus-lineAnimation 0.3s ease-out forwards; } .mi-file-plus .file-plus.animate .vertical { opacity: 0; animation: mi-file-plus-lineAnimation 0.3s ease-out 0.25s forwards; } @keyframes mi-file-plus-lineAnimation { 0% { opacity: 0; stroke-dashoffset: 8; } 15% { opacity: 1; stroke-dashoffset: 8; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.mi-file-up g.animate path { transform: translateY(-2px); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .mi-file-up g path { transform: translateY(0); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.mi-file-down g.animate path { transform: translateY(2px); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .mi-file-down g path { transform: translateY(0); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.mi-bookmark .bookmark-icon { overflow: visible; } .mi-bookmark .bookmark-path { transform-origin: center; transition: transform 0.3s ease-out; } .mi-bookmark .bookmark-icon.animate .bookmark-path { animation: mi-bookmark-bookmarkBounce 0.6s ease-out; } @keyframes mi-bookmark-bookmarkBounce { 0% { transform: scale(1, 1); } 25% { transform: scale(0.9, 1.3); } 50% { transform: scale(1.1, 0.9); } 75% { transform: scale(0.95, 1.05); } 100% { transform: scale(1, 1); } }
.mi-pencil .pencil-icon { overflow: visible; transform: rotate(0deg); transform-origin: center; } .mi-pencil .pencil-icon.animate { animation: mi-pencil-jiggleAnimation 0.4s ease-in-out 2; } @keyframes mi-pencil-jiggleAnimation { 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } }
.mi-square-pen .square-pen-icon { overflow: visible; } .mi-square-pen .pen { transform-origin: 19.875px 4.125px; transition: transform 0.25s ease-in-out; } .mi-square-pen .pen.animate { animation: mi-square-pen-penWiggle 0.5s ease-in-out 2; } @keyframes mi-square-pen-penWiggle { 0%, 100% { transform: rotate(0deg) translate(0px, 0px); } 25% { transform: rotate(-0.5deg) translate(-1px, 1.5px); } 75% { transform: rotate(0.5deg) translate(1.5px, -1px); } }
.mi-upload g.animate polyline, .mi-upload g.animate line { transform: translateY(-2px); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .mi-upload g polyline, .mi-upload g line { transform: translateY(0); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.mi-download g.animate polyline, .mi-download g.animate line { transform: translateY(2px); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .mi-download g polyline, .mi-download g line { transform: translateY(0); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.mi-paperclip .paperclip-icon { overflow: visible; } .mi-paperclip .paperclip-path { stroke-dasharray: 87; stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s ease-in, opacity 0.1s ease-in; } .mi-paperclip .paperclip-icon.animate .paperclip-path { animation: mi-paperclip-drawPath 0.6s ease-in forwards; } @keyframes mi-paperclip-drawPath { 0% { stroke-dashoffset: 87; } 15% { stroke-dashoffset: 87; } 100% { stroke-dashoffset: 174; } }
.mi-archive rect { transition: transform 0.2s ease-in; } .mi-archive .animate-rect { transform: translateY(-2px); } .mi-archive .animate-path { transform: translateY(2px); transition: transform 0.2s ease-in; }
.mi-copy .copy-rect, .mi-copy .copy-path { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .mi-copy .copy-rect.animate { transform: translate(-3px, -3px); } .mi-copy .copy-path.animate { transform: translate(3px, 3px); } .mi-copy svg { overflow: visible; }
.mi-clipboard .clipboard-icon { overflow: visible; } .mi-clipboard .clip, .mi-clipboard .board { transition: transform 0.3s ease; } .mi-clipboard .clipboard-icon.animate .clip { animation: mi-clipboard-clipBounce 0.5s ease-in-out; } .mi-clipboard .clipboard-icon.animate .board { animation: mi-clipboard-boardShake 0.5s ease-in-out; } @keyframes mi-clipboard-clipBounce { 0% { transform: translateY(0); } 25% { transform: translateY(-2px); } 50% { transform: translateY(1px); } 100% { transform: translateY(0); } } @keyframes mi-clipboard-boardShake { 0% { transform: rotate(0deg); } 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } 100% { transform: rotate(0deg); } }
.mi-history .arrow { transform-origin: center; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .mi-history .arrow.animate { transform: rotate(-50deg); } .mi-history .hour-hand { transform-origin: 50% 50%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .mi-history .hour-hand.animate { transform: rotate(-360deg); } .mi-history .minute-hand { transform-origin: 50% 50%; transition: transform 0.5s ease-in-out; } .mi-history .minute-hand.animate { transform: rotate(-45deg); }
.mi-bold .bold-icon { overflow: visible; } .mi-bold .bold-path { stroke-width: 2; transition: stroke-width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .mi-bold .bold-icon.animate .bold-path { stroke-width: 3.5; }
.mi-minus .minus { overflow: visible; } .mi-minus .horizontal { stroke-dasharray: 14; stroke-dashoffset: 0; transition: stroke-dashoffset 0.15s ease-out; } .mi-minus .minus.animate .horizontal { opacity: 0; animation: mi-minus-lineAnimation 0.3s ease-out forwards; } @keyframes mi-minus-lineAnimation { 0% { opacity: 0; stroke-dashoffset: 14; } 15% { opacity: 1; stroke-dashoffset: 14; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.mi-chart-bar .chart-bar-icon { overflow: visible; } .mi-chart-bar .bar { stroke-dasharray: 12; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease, opacity 0.3s ease; } .mi-chart-bar .chart-bar-icon.animate .bar { animation: mi-chart-bar-barAnimation 0.6s ease forwards; } .mi-chart-bar .chart-bar-icon.animate .bar-0 { animation-delay: 0s; } .mi-chart-bar .chart-bar-icon.animate .bar-1 { animation-delay: 0.1s; } .mi-chart-bar .chart-bar-icon.animate .bar-2 { animation-delay: 0.2s; } @keyframes mi-chart-bar-barAnimation { 0% { stroke-dashoffset: 0; opacity: 1; } 50% { stroke-dashoffset: 12; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-chart-pie .chart-pie-icon { overflow: visible; } .mi-chart-pie .pie-slice { transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1.5); } .mi-chart-pie .chart-pie-icon.animate .pie-slice { transform: translate(1.1px, -1.1px); }
.mi-activity .activity-icon { overflow: visible; } .mi-activity .activity-path { stroke-dasharray: 50; stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s ease-in-out, opacity 0.1s ease-in-out; } .mi-activity .activity-icon.animate .activity-path { animation: mi-activity-drawPath 0.6s ease-in-out forwards; } @keyframes mi-activity-drawPath { 0% { stroke-dashoffset: 50; } 15% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 100; } }
.mi-layout-grid .layout-grid-icon { overflow: visible; } .mi-layout-grid .layout-grid-icon.animate .top-right-panel { opacity: 0; animation: mi-layout-grid-fadeInTop 0.35s ease-out forwards; } .mi-layout-grid .layout-grid-icon.animate .bottom-right-panel { opacity: 0; animation: mi-layout-grid-fadeInRight 0.35s ease-out 0.1s forwards; } .mi-layout-grid .layout-grid-icon.animate .bottom-left-panel { opacity: 0; animation: mi-layout-grid-fadeInBottom 0.35s ease-out 0.2s forwards; } .mi-layout-grid .layout-grid-icon.animate .top-left-panel { opacity: 0; animation: mi-layout-grid-fadeInLeft 0.35s ease-out 0.3s forwards; } @keyframes mi-layout-grid-fadeInLeft { 0%, 50% { opacity: 0; transform: translateX(-10px); } 80% { opacity: 0.8; transform: translateX(2px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes mi-layout-grid-fadeInRight { 0%, 50% { opacity: 0; transform: translateX(10px); } 80% { opacity: 0.8; transform: translateX(-2px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes mi-layout-grid-fadeInTop { 0%, 50% { opacity: 0; transform: translateY(-10px); } 80% { opacity: 0.8; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes mi-layout-grid-fadeInBottom { 0%, 50% { opacity: 0; transform: translateY(10px); } 80% { opacity: 0.8; transform: translateY(-2px); } 100% { opacity: 1; transform: translateY(0); } }
.mi-search svg { transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 1s ease-in-out; } .mi-search .animate { animation: mi-search-search-bounce 1s ease-in-out; } @keyframes mi-search-search-bounce { 0%, 100% { transform: translateX(0) translateY(0); } 25% { transform: translateX(0) translateY(-4px); } 50% { transform: translateX(-3px) translateY(0); } }
.mi-compass .compass-icon polygon { transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: center; } .mi-compass .compass-icon polygon.animate { transform: rotate(360deg); }
.mi-arrow-left-right .left-arrow, .mi-arrow-left-right .right-arrow { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .mi-arrow-left-right .left-arrow.animate { animation: mi-arrow-left-right-moveLeft 0.5s; } .mi-arrow-left-right .right-arrow.animate { animation: mi-arrow-left-right-moveRight 0.5s; } @keyframes mi-arrow-left-right-moveLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } } @keyframes mi-arrow-left-right-moveRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.mi-kanban .kanban-icon { overflow: visible; } .mi-kanban .column { stroke-dasharray: 20; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease, opacity 0.3s ease; } .mi-kanban .kanban-icon.animate .column { animation: mi-kanban-columnAnimation 0.6s ease forwards; } .mi-kanban .kanban-icon.animate .column-0 { animation-delay: 0s; } .mi-kanban .kanban-icon.animate .column-1 { animation-delay: 0.1s; } .mi-kanban .kanban-icon.animate .column-2 { animation-delay: 0.2s; } @keyframes mi-kanban-columnAnimation { 0% { stroke-dashoffset: 0; opacity: 1; } 50% { stroke-dashoffset: 20; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-list-checks .list-checks-icon { overflow: visible; } .mi-list-checks .check-path { stroke-dasharray: 9; stroke-dashoffset: 0; transition: stroke-dashoffset 0.125s ease-out, opacity 0.125s ease-out; } .mi-list-checks .list-checks-icon.animate .check-path { animation: mi-list-checks-checkAnimation 0.5s ease-out backwards; } @keyframes mi-list-checks-checkAnimation { 0% { stroke-dashoffset: 9; opacity: 0; } 33% { stroke-dashoffset: 9; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-chart-column .chart-column-icon { overflow: visible; } .mi-chart-column .column { stroke-dasharray: 12; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease, opacity 0.3s ease; } .mi-chart-column .chart-column-icon.animate .column { animation: mi-chart-column-columnAnimation 0.6s ease forwards; } .mi-chart-column .chart-column-icon.animate .column-0 { animation-delay: 0s; } .mi-chart-column .chart-column-icon.animate .column-1 { animation-delay: 0.1s; } .mi-chart-column .chart-column-icon.animate .column-2 { animation-delay: 0.2s; } @keyframes mi-chart-column-columnAnimation { 0% { stroke-dashoffset: 0; opacity: 1; } 50% { stroke-dashoffset: 12; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-blocks rect { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .mi-blocks .top-right { transform: translate(-1px, 1px); }
.mi-route .line { stroke-dasharray: 50; stroke-dashoffset: 0; } .mi-route .route-icon.animate .circle-1 { animation: mi-route-circle1Animation 0.4s ease-out forwards; } .mi-route .route-icon.animate .circle-2 { animation: mi-route-circle2Animation 0.4s ease-out forwards; } .mi-route .route-icon.animate .line { animation: mi-route-lineAnimation 0.8s forwards; } @keyframes mi-route-circle1Animation { 0%, 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes mi-route-circle2Animation { 0%, 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes mi-route-lineAnimation { 0%, 50% { stroke-dashoffset: 50; } 15% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 0; } }
.mi-gauge .gauge-icon { overflow: visible; } .mi-gauge .gauge-needle { transform-origin: 12px 14px; transition: transform 0.6s cubic-bezier(0.16, 1.4, 0.3, 1); } .mi-gauge .gauge-icon.animate .gauge-needle { transform: rotate(72deg); }
.mi-terminal .terminal-icon { overflow: visible; } .mi-terminal .cursor-line { opacity: 1; transition: opacity 0.8s linear; } .mi-terminal .cursor-line.animate { animation: mi-terminal-blink 0.8s linear 1; } @keyframes mi-terminal-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.mi-cpu .cpu-icon { overflow: visible; } .mi-cpu .vertical-line, .mi-cpu .horizontal-line { transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; transform-origin: center; } .mi-cpu .animate .vertical-line { animation: mi-cpu-scaleYAnimation 0.5s ease-in-out 2; } .mi-cpu .animate .horizontal-line { animation: mi-cpu-scaleXAnimation 0.5s ease-in-out 2; } @keyframes mi-cpu-scaleYAnimation { 0% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(1.1); opacity: 0.8; } 100% { transform: scaleY(1); opacity: 1; } } @keyframes mi-cpu-scaleXAnimation { 0% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(1.1); opacity: 0.8; } 100% { transform: scaleX(1); opacity: 1; } }
.mi-landmark .landmark-icon { overflow: visible; } .mi-landmark .landmark-icon.animate .column-1 { opacity: 0; animation: mi-landmark-fadeInLeft 0.35s ease-out 0.3s forwards; } .mi-landmark .landmark-icon.animate .column-2 { opacity: 0; animation: mi-landmark-fadeInLeft 0.35s ease-out 0.2s forwards; } .mi-landmark .landmark-icon.animate .column-3 { opacity: 0; animation: mi-landmark-fadeInLeft 0.35s ease-out 0.1s forwards; } .mi-landmark .landmark-icon.animate .column-4 { opacity: 0; animation: mi-landmark-fadeInLeft 0.35s ease-out 0s forwards; } .mi-landmark .landmark-icon.animate .roof { opacity: 0; animation: mi-landmark-fadeInTop 0.35s ease-out 0.4s forwards; } @keyframes mi-landmark-fadeInLeft { 0%, 50% { opacity: 0; transform: translateX(-10px); } 80% { opacity: 0.8; transform: translateX(2px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes mi-landmark-fadeInTop { 0%, 50% { opacity: 0; transform: translateY(-10px); } 80% { opacity: 0.8; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } }
.mi-shopping-cart .shopping-cart-icon { transition: transform 0.2s ease-in-out; transform-origin: center; } .mi-shopping-cart .shopping-cart-icon.animate { animation: mi-shopping-cart-cartBounce 0.8s ease-in-out; } @keyframes mi-shopping-cart-cartBounce { 0%, 100% { transform: scale(1) translateY(0); } 25% { transform: scale(1.1) translateY(-5px); } 50% { transform: scale(1) translateY(0); } 75% { transform: scale(1.1) translateY(-5px); } }
.mi-ticket-check .ticket-check-icon { overflow: visible; } .mi-ticket-check .check-path { stroke-dasharray: 9; stroke-dashoffset: 0; transition: stroke-dashoffset 0.125s ease-out, opacity 0.125s ease-out; } .mi-ticket-check .ticket-check-icon.animate .check-path { animation: mi-ticket-check-checkAnimation 0.5s ease-out backwards; } @keyframes mi-ticket-check-checkAnimation { 0% { stroke-dashoffset: 9; opacity: 0; } 33% { stroke-dashoffset: 9; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-clock .minute-hand, .mi-clock .hour-hand { transform-origin: center; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .mi-clock .hour-hand { transition-duration: 0.5s; transition-timing-function: ease-in-out; } .mi-clock .minute-hand.animate { transform: rotate(360deg); } .mi-clock .hour-hand.animate { transform: rotate(30deg); }
.mi-timer .timer-icon { overflow: visible; } .mi-timer .button { transform-origin: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mi-timer .timer-icon.animate .button { animation: mi-timer-buttonPress 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mi-timer .hand { transform-origin: 12px 14px; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .mi-timer .timer-icon.animate .hand { transform: rotate(300deg); transition-delay: 0.1s; } @keyframes mi-timer-buttonPress { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(0.9) translateY(0.5px); } }
.mi-message-circle .message-circle-path { transform-origin: bottom left; } .mi-message-circle .message-circle-path.animate { animation: mi-message-circle-messageCircleAnimation 0.8s ease-in-out; } @keyframes mi-message-circle-messageCircleAnimation { 0% { transform: rotate(0deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } }
.mi-send .send-icon { overflow: hidden; } .mi-send .animate-group { transform-origin: center; animation: mi-send-sendAnimation 1.2s ease-in-out; } @keyframes mi-send-sendAnimation { 0% { transform: scale(1) translateX(0) translateY(0); } 25% { transform: scale(0.8) translateX(-10%) translateY(10%); } 50% { transform: scale(1) translateX(100%) translateY(-100%); } 50.1% { transform: scale(1) translateX(-125%) translateY(125%); } 100% { transform: scale(1) translateX(0) translateY(0); } }
.mi-bell .animate-svg { transform-origin: top center; animation: mi-bell-bellRing 0.9s ease-in-out; } .mi-bell .animate-bell { animation: bellMove 1.1s ease-in-out; } .mi-bell .animate-clapper { animation: mi-bell-clapperMove 1.1s ease-in-out; } @keyframes mi-bell-bellRing { 0% { transform: rotate(0deg); } 16.67% { transform: rotate(20deg); } 33.33% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 66.67% { transform: rotate(-5deg); } 83.33% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } } @keyframes mi-bell-clapperMove { 0% { transform: translateX(0); } 14.29% { transform: translateX(-6px); } 28.57% { transform: translateX(5px); } 42.86% { transform: translateX(-5px); } 57.14% { transform: translateX(4px); } 71.43% { transform: translateX(-3px); } 85.71% { transform: translateX(2px); } 100% { transform: translateX(0); } }
.mi-phone-call .phone-call-wave1, .mi-phone-call .phone-call-wave2 { opacity: 1; transform: scale(1); transform-origin: center; } .mi-phone-call .animate .phone-call-wave1 { animation: mi-phone-call-phoneCallWaveAnimation 0.6s ease-in-out; } .mi-phone-call .animate .phone-call-wave2 { animation: mi-phone-call-phoneCallWaveAnimation 0.6s ease-in-out 0.2s; } @keyframes mi-phone-call-phoneCallWaveAnimation { 0% { opacity: 1; transform: scale(1); } 33.33% { opacity: 0; transform: scale(0); } 66.67% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
.mi-phone-off .phone-off { overflow: visible; } .mi-phone-off .phone-off { overflow: visible; transform: translateX(0); transition: transform 0.6s ease-in-out; } .mi-phone-off .phone-off.animate { animation: mi-phone-off-groupShake 0.6s ease-in-out; } @keyframes mi-phone-off-groupShake { 0% { transform: translateX(0); } 16.67% { transform: translateX(-7%); } 33.33% { transform: translateX(7%); } 50% { transform: translateX(-7%); } 66.67% { transform: translateX(7%); } 100% { transform: translateX(0); } }
.mi-bell-ring .animate-svg { transform-origin: top center; animation: mi-bell-ring-bellRing 0.9s ease-in-out; } .mi-bell-ring .animate-bell { animation: bellMove 1.1s ease-in-out; } .mi-bell-ring .animate-clapper { animation: mi-bell-ring-clapperMove 1.1s ease-in-out; } @keyframes mi-bell-ring-bellRing { 0% { transform: rotate(0deg); } 16.67% { transform: rotate(20deg); } 33.33% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 66.67% { transform: rotate(-5deg); } 83.33% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } } @keyframes mi-bell-ring-clapperMove { 0% { transform: translateX(0); } 14.29% { transform: translateX(-6px); } 28.57% { transform: translateX(5px); } 42.86% { transform: translateX(-5px); } 57.14% { transform: translateX(4px); } 71.43% { transform: translateX(-3px); } 85.71% { transform: translateX(2px); } 100% { transform: translateX(0); } }
.mi-message-square .message-square-path { transform-origin: bottom left; } .mi-message-square .message-square-path.animate { animation: mi-message-square-messageSquareAnimation 0.8s ease-in-out; } @keyframes mi-message-square-messageSquareAnimation { 0% { transform: rotate(0deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } }
.mi-radio .radio-icon { overflow: visible; } .mi-radio .radio-level { opacity: 1; transition: opacity 0.2s ease; } .mi-radio .radio-icon.animate .radio-level { animation: mi-radio-fadeInSequence 0.6s ease forwards; } .mi-radio .radio-icon.animate .radio-line-1 { opacity: 0; animation-delay: 0.15s; } .mi-radio .radio-icon.animate .radio-line-2 { opacity: 0; animation-delay: 0.25s; } .mi-radio .radio-icon.animate .radio-line-3 { opacity: 0; animation-delay: 0.35s; } @keyframes mi-radio-fadeInSequence { 0% { opacity: 0; } 100% { opacity: 1; } }
.mi-wifi .wifi-icon { overflow: visible; } .mi-wifi .wifi-level { opacity: 1; transition: opacity 0.2s ease; } .mi-wifi .wifi-icon.animate .wifi-level { animation: mi-wifi-fadeInSequence 0.6s ease forwards; } .mi-wifi .wifi-icon.animate .wifi-line-1 { opacity: 0; animation-delay: 0.25s; } .mi-wifi .wifi-icon.animate .wifi-line-2 { opacity: 0; animation-delay: 0.35s; } .mi-wifi .wifi-icon.animate .wifi-line-3 { opacity: 0; animation-delay: 0.45s; } @keyframes mi-wifi-fadeInSequence { 0% { opacity: 0; } 100% { opacity: 1; } }
.mi-play polygon { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .mi-play polygon.animate { transform: translateX(3px); }
.mi-volume-x .volume-x-icon { overflow: visible; } .mi-volume-x .diagonal-1, .mi-volume-x .diagonal-2 { stroke-dasharray: 8.5; stroke-dashoffset: 0; transition: stroke-dashoffset 0.15s ease-out; } .mi-volume-x .volume-x-icon.animate .diagonal-1 { opacity: 0; animation: mi-volume-x-lineAnimation 0.3s ease-out forwards; } .mi-volume-x .volume-x-icon.animate .diagonal-2 { opacity: 0; animation: mi-volume-x-lineAnimation 0.3s ease-out 0.25s forwards; } @keyframes mi-volume-x-lineAnimation { 0% { opacity: 0; stroke-dashoffset: 8.5; } 15% { opacity: 1; stroke-dashoffset: 8.5; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.mi-key-round .key-round-icon { transform-origin: center; transition: transform 0.3s ease; } .mi-key-round .key-round-icon.animate { animation: mi-key-round-keyBounce 0.9s ease; } @keyframes mi-key-round-keyBounce { 0% { transform: translateY(0) rotate(0deg); } 20% { transform: translateY(-3px) rotate(3deg); } 40% { transform: translateY(0) rotate(-3deg); } 60% { transform: translateY(-2px) rotate(0deg); } 100% { transform: translateY(0) rotate(0deg); } }
.mi-log-in .log-in-group { transform: translateX(0); transition: transform 0.3s ease-in-out; } .mi-log-in .animate .log-in-group { animation: mi-log-in-logInGroupAnimation 0.6s ease-in-out; } @keyframes mi-log-in-logInGroupAnimation { 0% { transform: translateX(0); } 50% { transform: translateX(2px); } 100% { transform: translateX(0); } }
.mi-log-out .log-out-group { transform: translateX(0); transition: transform 0.3s ease-in-out; } .mi-log-out .animate .log-out-group { animation: mi-log-out-logOutGroupAnimation 0.6s ease-in-out; } @keyframes mi-log-out-logOutGroupAnimation { 0% { transform: translateX(0); } 50% { transform: translateX(2px); } 100% { transform: translateX(0); } }
.mi-eye-off .eye-off { overflow: visible; } .mi-eye-off .eye-off { overflow: visible; transform: translateX(0); transition: transform 0.6s ease-in-out; } .mi-eye-off .eye-off.animate { animation: mi-eye-off-groupShake 0.6s ease-in-out; } @keyframes mi-eye-off-groupShake { 0% { transform: translateX(0); } 16.67% { transform: translateX(-7%); } 33.33% { transform: translateX(7%); } 50% { transform: translateX(-7%); } 66.67% { transform: translateX(7%); } 100% { transform: translateX(0); } }
.mi-key svg { transform-origin: center; transform: rotate(0deg); transition: transform 0.3s ease-out; } .mi-key .animate { transform: rotate(-28deg); transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.mi-key-square .key-square-icon { overflow: visible; } .mi-key-square .key-square-icon.animate { transform-origin: center; animation: mi-key-square-keyAnimation 0.6s; } @keyframes mi-key-square-keyAnimation { 0% { transform: rotate(0deg) scale(1); } 30% { transform: rotate(15deg) scale(1.05); } 70% { transform: rotate(-15deg) scale(1); } 100% { transform: rotate(0deg) scale(1); } }
.mi-arrow-up path { transition: all 0.2s ease-out; } .mi-arrow-up .head { transform: translateY(3px); }
.mi-arrow-down path { transition: all 0.2s ease-out; } .mi-arrow-down .head { transform: translateY(-3px); }
.mi-arrow-left path { transition: all 0.2s ease-out; } .mi-arrow-left .head { transform: translateX(3px); }
.mi-arrow-right path { transition: all 0.2s ease-out; } .mi-arrow-right .head { transform: translateX(-3px); }
.mi-chevron-up path { transition: all 0.2s ease-in; } .mi-chevron-up .chevron { transform: translateY(-3px); }
.mi-chevron-down path { transition: all 0.2s ease-in; } .mi-chevron-down .chevron { transform: translateY(3px); }
.mi-chevron-left path { transition: all 0.2s ease-in; } .mi-chevron-left .chevron { transform: translateX(-3px); }
.mi-chevron-right path { transition: all 0.2s ease-in; } .mi-chevron-right .chevron { transform: translateX(3px); }
.mi-circle-arrow-up path { transition: all 0.2s ease-out; } .mi-circle-arrow-up .head { transform: translateY(1.5px); }
.mi-circle-arrow-down path { transition: all 0.2s ease-out; } .mi-circle-arrow-down .head { transform: translateY(-1.5px); }
.mi-circle-arrow-left path { transition: all 0.2s ease-out; } .mi-circle-arrow-left .head { transform: translateX(1.5px); }
.mi-circle-arrow-right path { transition: all 0.2s ease-out; } .mi-circle-arrow-right .head { transform: translateX(-1.5px); }
.mi-square-arrow-up path { transition: all 0.2s ease-out; } .mi-square-arrow-up .head { transform: translateY(1.5px); }
.mi-square-arrow-down path { transition: all 0.2s ease-out; } .mi-square-arrow-down .head { transform: translateY(-1.5px); }
.mi-square-arrow-left path { transition: all 0.2s ease-out; } .mi-square-arrow-left .head { transform: translateX(1.5px); }
.mi-square-arrow-right path { transition: all 0.2s ease-out; } .mi-square-arrow-right .head { transform: translateX(-1.5px); }
.mi-arrow-up-right path { transition: all 0.2s ease-out; } .mi-arrow-up-right .head { transform: translate(-3px, 3px); }
.mi-house .house-icon { overflow: visible; } .mi-house .door { stroke-dasharray: 22; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease, opacity 0.3s ease; } .mi-house .house-icon.animate .door { animation: mi-house-doorAnimation 0.6s ease-out forwards; } @keyframes mi-house-doorAnimation { 0% { stroke-dashoffset: 22; opacity: 0; } 15% { stroke-dashoffset: 22; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-star .star-icon { overflow: visible; } .mi-star .animate-group { transform-origin: center; animation: mi-star-groupAnimation 0.6s ease-in-out; } @keyframes mi-star-groupAnimation { 0% { transform: scale(1); } 33% { transform: scale(0.9); } 66% { transform: scale(1.2); } 100% { transform: scale(1); } }
.mi-settings .settings-gear { transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: center; } .mi-settings .settings-gear.animate { transform: rotate(180deg); } .mi-settings svg { overflow: visible; }
.mi-plus .plus { overflow: visible; } .mi-plus .horizontal, .mi-plus .vertical { stroke-dasharray: 14; stroke-dashoffset: 0; transition: stroke-dashoffset 0.15s ease-out; } .mi-plus .plus.animate .horizontal { opacity: 0; animation: mi-plus-lineAnimation 0.3s ease-out forwards; } .mi-plus .plus.animate .vertical { opacity: 0; animation: mi-plus-lineAnimation 0.3s ease-out 0.25s forwards; /* Start shortly before horizontal ends */ } @keyframes mi-plus-lineAnimation { 0% { opacity: 0; stroke-dashoffset: 14; } 15% { opacity: 1; stroke-dashoffset: 14; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.mi-trash-2 .is-animated { transform: translateY(-1px); transition: transform 0.2s ease-in; } .mi-trash-2 .animate-path { transform: translateY(1px); transition: transform 0.2s ease-in; } .mi-trash-2 .is-animated-path { transition: d 0.2s ease-in; }
.mi-refresh-cw .refresh-cw-icon { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: center; } .mi-refresh-cw .refresh-cw-icon.animate { transform: rotate(50deg); } .mi-refresh-cw svg { overflow: visible; }
.mi-undo .undo-icon { transform-origin: center 71.42857%; /* calc(20 / 28 * 100%) */ transition: transform 0.3s ease; } .mi-undo .undo-icon.animate { transform: rotate(-13deg); }
.mi-redo .redo-icon { transform-origin: center 71.42857%; /* calc(20 / 28 * 100%) */ transition: transform 0.3s ease; } .mi-redo .redo-icon.animate { transform: rotate(13deg); }
.mi-sparkles .sparkles-icon { overflow: visible; } .mi-sparkles .sparkles-group { transform-origin: center; transition: transform 0.6s ease-in-out; } .mi-sparkles .sparkles-icon.animate .sparkles-group { animation: mi-sparkles-scaleGroup 0.6s ease-in-out; } .mi-sparkles .sparkles-plus { opacity: 1; transform: scale(1); transform-origin: center; transform-box: fill-box; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; } .mi-sparkles .sparkles-icon.animate .sparkles-plus { animation: mi-sparkles-pulsePlus 0.75s ease-in-out; } .mi-sparkles .sparkles-circle { opacity: 1; transform: scale(1); transform-origin: center; transform-box: fill-box; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; } .mi-sparkles .sparkles-icon.animate .sparkles-circle { animation: mi-sparkles-pulseCircle 0.6s ease-in-out; } @keyframes mi-sparkles-scaleGroup { 0% { transform: scale(1); } 33.33% { transform: scale(0.9); } 66.67% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes mi-sparkles-pulsePlus { 0%, 20% { opacity: 1; transform: scale(1); } 46.67% { opacity: 0; transform: scale(0); } 73.33% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes mi-sparkles-pulseCircle { 0% { opacity: 1; transform: scale(1); } 33.33% { opacity: 0; transform: scale(0); } 66.67% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
.mi-lightbulb .lightbulb-icon { overflow: visible; } .mi-lightbulb .lightbulb-path1 { transform-origin: bottom center; transform-box: fill-box; fill: transparent; transition: fill 0s; } .mi-lightbulb .lightbulb-path2 { transform-origin: bottom center; transform-box: fill-box; } .mi-lightbulb .lightbulb-icon.animate .lightbulb-path1 { animation: mi-lightbulb-lightbulb-rotate1 0.8s ease-in-out forwards, mi-lightbulb-lightbulb-fill-opacity 0.3s ease-in-out 0.4s forwards; fill: currentColor; fill-opacity: 0; } .mi-lightbulb .lightbulb-icon:not(.animate) .lightbulb-path1 { fill: transparent; } .mi-lightbulb .lightbulb-icon.animate .lightbulb-path2 { animation: mi-lightbulb-lightbulb-rotate2 0.8s ease-in-out forwards; } @keyframes mi-lightbulb-lightbulb-rotate1 { 0% { transform: rotate(0deg); } 40% { transform: rotate(-20deg); } 60% { transform: rotate(15deg); } 80% { transform: rotate(-7deg); } 100% { transform: rotate(0deg); } } @keyframes mi-lightbulb-lightbulb-fill-opacity { 0% { fill-opacity: 0; } 40% { fill-opacity: 1; } 60% { fill-opacity: 0; } 80% { fill-opacity: 1; } 100% { fill-opacity: 0; } } @keyframes mi-lightbulb-lightbulb-rotate2 { 0% { transform: rotate(0deg); } 40% { transform: rotate(0deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
.mi-rocket .rocket-icon { overflow: visible; transition: transform 6s ease-in-out; } .mi-rocket .rocket-icon.animate { animation: mi-rocket-rocketMovement 6s ease-in-out 1 alternate; } .mi-rocket .rocket-icon .fire { transition: d 2s ease; } .mi-rocket .rocket-icon.animate .fire { animation: mi-rocket-fireAnimation 2s ease 1; } @keyframes mi-rocket-rocketMovement { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(0, -3px); } 30% { transform: translate(-3px, 0); } 45% { transform: translate(2px, -2px); } 60% { transform: translate(-2px, -3px); } 75% { transform: translate(1px, -1px); } 90% { transform: translate(-1px, -2px); } } @keyframes mi-rocket-fireAnimation { 0%, 100% { d: path( 'M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z' ); } 20% { d: path( 'M4.5 16.5c-1.5 1.26-3 5.5-3 5.5s4.74-1 6-2.5c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z' ); } 50% { d: path( 'M4.5 16.5c-1.5 1.26-2.2 4.8-2.2 4.8s3.94-0.3 5.2-1.8c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z' ); } 80% { d: path( 'M4.5 16.5c-1.5 1.26-2.8 5.2-2.8 5.2s4.54-0.7 5.8-2.2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z' ); } }
.mi-cloud-upload g.animate path { transform: translateY(-2px); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .mi-cloud-upload g path { transform: translateY(0); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.mi-cloud-download g.animate path { transform: translateY(2px); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .mi-cloud-download g path { transform: translateY(0); transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.mi-battery .battery-icon { overflow: visible; } .mi-battery .battery-icon.animate .battery { opacity: 0; animation: mi-battery-blink 0.5s 3; } @keyframes mi-battery-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.mi-maximize-2 polyline, .mi-maximize-2 line { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .mi-maximize-2 .top-right { transform: translate(2px, -2px); } .mi-maximize-2 .bottom-left { transform: translate(-2px, 2px); }
.mi-check .check-icon { overflow: visible; } .mi-check .check-path { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset 0.125s ease-out, opacity 0.125s ease-out; } .mi-check .check-icon.animate .check-path { animation: mi-check-checkAnimation 0.5s ease-out backwards; } @keyframes mi-check-checkAnimation { 0% { stroke-dashoffset: 24; opacity: 0; } 33% { stroke-dashoffset: 24; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.mi-x .x { overflow: visible; } .mi-x .diagonal-1, .mi-x .diagonal-2 { stroke-dasharray: 17; stroke-dashoffset: 0; transition: stroke-dashoffset 0.15s ease-out; } .mi-x .x.animate .diagonal-1 { opacity: 0; animation: mi-x-lineAnimation 0.3s ease-out forwards; } .mi-x .x.animate .diagonal-2 { opacity: 0; animation: mi-x-lineAnimation 0.3s ease-out 0.25s forwards; } @keyframes mi-x-lineAnimation { 0% { opacity: 0; stroke-dashoffset: 17; } 15% { opacity: 1; stroke-dashoffset: 17; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.mi-circle-alert .animate-icon { animation: mi-circle-alert-primaryAnimation 0.5s ease-in-out; } @keyframes mi-circle-alert-primaryAnimation { 0% { transform: scale(1) rotate(0deg); } 20% { transform: scale(1.1) rotate(-3deg); } 40% { transform: scale(1.1) rotate(3deg); } 60% { transform: scale(1.1) rotate(-2deg); } 100% { transform: scale(1) rotate(0deg); } }
.mi-circle-question-mark .animate-icon { transition: transform 0.5s ease-in-out; } .mi-circle-question-mark .animate-path { transition: transform 0.5s ease-in-out; transform-origin: center; animation: mi-circle-question-mark-rotateAnimation 0.5s ease-in-out; } @keyframes mi-circle-question-mark-rotateAnimation { 0% { transform: rotate(0deg); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } }