animated-mat-icon
Version:
A simple lightweight package for animating angular mat icons
20 lines • 12.4 kB
JavaScript
import { Component, Input as input } from '@angular/core';
export class AnimatedMatIconComponent {
}
AnimatedMatIconComponent.decorators = [
{ type: Component, args: [{
selector: 'animated-mat-icon',
template: `
<mat-icon [class]="onHover ? animation+'-hover' : animation" [style.color]="color" [style.font-size]="size">{{icon}}</mat-icon>
`,
styles: [".move-to-right,.move-to-right-hover:hover{-webkit-animation:move-to-right .5s cubic-bezier(.36,.07,.57,.99) infinite;animation:move-to-right .5s cubic-bezier(.36,.07,.57,.99) infinite}.cross,.cross-hover:hover{-webkit-animation:cross 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:cross 1s cubic-bezier(.36,.07,.57,.99) infinite}.diagonal-pulse,.diagonal-pulse-hover:hover{-webkit-animation:diagonal-pulse .5s cubic-bezier(.36,.07,.57,.99) infinite;animation:diagonal-pulse .5s cubic-bezier(.36,.07,.57,.99) infinite}.refresh,.refresh-rotate-hover:hover{-webkit-animation:refresh-rotate 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:refresh-rotate 1s cubic-bezier(.36,.07,.57,.99) infinite}.heart-beat,.heart-beat-hover:hover{-webkit-animation:heart-beat .5s cubic-bezier(.36,.07,.57,.99) infinite;animation:heart-beat .5s cubic-bezier(.36,.07,.57,.99) infinite}.roll-back,.roll-back-hover:hover{-webkit-animation:roll-back 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:roll-back 1s cubic-bezier(.36,.07,.57,.99) infinite}.italic-deform,.italic-deform-hover:hover{-webkit-animation:italic-deform 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:italic-deform 1s cubic-bezier(.36,.07,.57,.99) infinite}.winding,.winding-hover:hover{-webkit-animation:winding 5s cubic-bezier(.36,.07,.57,.99) infinite;animation:winding 5s cubic-bezier(.36,.07,.57,.99) infinite}.wrench,.wrench-hover:hover{transform-origin:79% 26%;-webkit-animation:wrench 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:wrench 1s cubic-bezier(.36,.07,.57,.99) infinite}.mouse-click,.mouse-click-hover:hover{-webkit-animation:mouse-click 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:mouse-click 1s cubic-bezier(.36,.07,.57,.99) infinite}.brush,.brush-hover:hover{-webkit-animation:brush 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:brush 1s cubic-bezier(.36,.07,.57,.99) infinite}.lock,.lock-hover:hover{-webkit-animation:lock 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:lock 1s cubic-bezier(.36,.07,.57,.99) infinite}.unlock,.unlock-hover:hover{transform-origin:75% 25%;-webkit-animation:unlock 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:unlock 1s cubic-bezier(.36,.07,.57,.99) infinite}.hourglass,.hourglass-hover:hover{-webkit-animation:hourglass 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:hourglass 1s cubic-bezier(.36,.07,.57,.99) infinite}.write,.write-hover:hover{-webkit-animation:write 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:write 1s cubic-bezier(.36,.07,.57,.99) infinite}.rocket,.rocket-hover:hover{-webkit-animation:rocket 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:rocket 1s cubic-bezier(.36,.07,.57,.99) infinite}.left-right,.left-right-hover:hover{-webkit-animation:left-right 1s cubic-bezier(.36,.07,.57,.99) infinite;animation:left-right 1s cubic-bezier(.36,.07,.57,.99) infinite}@-webkit-keyframes move-to-right{0%{transform:translateX(0)}33%{transform:translateX(-5px)}66%{transform:translateX(5px)}to{transform:translateX(0)}}@keyframes move-to-right{0%{transform:translateX(0)}33%{transform:translateX(-5px)}66%{transform:translateX(5px)}to{transform:translateX(0)}}@-webkit-keyframes cross{0%{transform:translate(0)}20%{transform:translate(-5px,5px)}40%{transform:translate(-5px,-5px)}60%{transform:translate(5px,5px)}80%{transform:translate(5px,-5px)}to{transform:translate(0)}}@keyframes cross{0%{transform:translate(0)}20%{transform:translate(-5px,5px)}40%{transform:translate(-5px,-5px)}60%{transform:translate(5px,5px)}80%{transform:translate(5px,-5px)}to{transform:translate(0)}}@-webkit-keyframes diagonal-pulse{0%{transform:translate(0)}25%{transform:translate(-5px,5px)}50%{transform:scale(2) translate(0)}75%{transform:translate(5px,-5px)}to{transform:translate(0)}}@keyframes diagonal-pulse{0%{transform:translate(0)}25%{transform:translate(-5px,5px)}50%{transform:scale(2) translate(0)}75%{transform:translate(5px,-5px)}to{transform:translate(0)}}@-webkit-keyframes refresh-rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes refresh-rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes heart-beat{0%{transform:scale(1.5)}20%{transform:scale(2)}30%{transform:scale(1.5)}40%{transform:scale(2)}to{transform:scale(1.5)}}@keyframes heart-beat{0%{transform:scale(1.5)}20%{transform:scale(2)}30%{transform:scale(1.5)}40%{transform:scale(2)}to{transform:scale(1.5)}}@-webkit-keyframes roll-back{0%{transform:translateX(0) rotate(0)}33%{transform:translateX(10px) rotate(0)}66%{transform:translateX(-10px) rotate(-1turn)}to{transform:translateX(0) rotate(-1turn)}}@keyframes roll-back{0%{transform:translateX(0) rotate(0)}33%{transform:translateX(10px) rotate(0)}66%{transform:translateX(-10px) rotate(-1turn)}to{transform:translateX(0) rotate(-1turn)}}@-webkit-keyframes italic-deform{0%{transform:skewX(0)}50%{transform:skewX(12deg)}to{transform:skewX(0)}}@keyframes italic-deform{0%{transform:skewX(0)}50%{transform:skewX(12deg)}to{transform:skewX(0)}}@-webkit-keyframes winding{0%{transform:rotate(0)}10%{transform:rotate(45deg)}17%{transform:rotate(45deg)}20%{transform:rotate(90deg)}27%{transform:rotate(90deg)}30%{transform:rotate(135deg)}37%{transform:rotate(135deg)}40%{transform:rotate(180deg)}47%{transform:rotate(180deg)}50%{transform:rotate(225deg)}57%{transform:rotate(225deg)}60%{transform:rotate(270deg)}67%{transform:rotate(270deg)}70%{transform:rotate(315deg)}77%{transform:rotate(315deg)}80%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes winding{0%{transform:rotate(0)}10%{transform:rotate(45deg)}17%{transform:rotate(45deg)}20%{transform:rotate(90deg)}27%{transform:rotate(90deg)}30%{transform:rotate(135deg)}37%{transform:rotate(135deg)}40%{transform:rotate(180deg)}47%{transform:rotate(180deg)}50%{transform:rotate(225deg)}57%{transform:rotate(225deg)}60%{transform:rotate(270deg)}67%{transform:rotate(270deg)}70%{transform:rotate(315deg)}77%{transform:rotate(315deg)}80%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@-webkit-keyframes wrench{0%{transform:rotate(0)}20%{transform:rotate(30deg)}30%{transform:rotate(-20deg)}50%{transform:rotate(30deg)}60%{transform:rotate(-20deg)}to{transform:rotate(0)}}@keyframes wrench{0%{transform:rotate(0)}20%{transform:rotate(30deg)}30%{transform:rotate(-20deg)}50%{transform:rotate(30deg)}60%{transform:rotate(-20deg)}to{transform:rotate(0)}}@-webkit-keyframes mouse-click{0%{transform:scale(1.5)}20%{transform:scale(1.5)}22.5%{transform:scale(1.2)}32.5%{transform:scale(1.2)}35%{transform:scale(1.5)}to{transform:scale(1.5)}}@keyframes mouse-click{0%{transform:scale(1.5)}20%{transform:scale(1.5)}22.5%{transform:scale(1.2)}32.5%{transform:scale(1.2)}35%{transform:scale(1.5)}to{transform:scale(1.5)}}@-webkit-keyframes brush{0%{transform:translate(0) rotate(0)}10%{transform:translate(-5px,2.5px) rotate(-10deg)}20%{transform:translate(-10px) rotate(-20deg)}30%{transform:translate(-5px,-2.5px) rotate(-30deg)}40%{transform:translate(0) rotate(-20deg)}50%{transform:translate(5px,2.5px) rotate(-10deg)}60%{transform:translate(10px) rotate(0)}70%{transform:translate(5px,-2.5px) rotate(10deg)}to{transform:translate(0) rotate(0)}}@keyframes brush{0%{transform:translate(0) rotate(0)}10%{transform:translate(-5px,2.5px) rotate(-10deg)}20%{transform:translate(-10px) rotate(-20deg)}30%{transform:translate(-5px,-2.5px) rotate(-30deg)}40%{transform:translate(0) rotate(-20deg)}50%{transform:translate(5px,2.5px) rotate(-10deg)}60%{transform:translate(10px) rotate(0)}70%{transform:translate(5px,-2.5px) rotate(10deg)}to{transform:translate(0) rotate(0)}}@-webkit-keyframes lock{0%{transform:translateY(0)}20%{transform:translateY(-5px)}30%{transform:translateY(5px)}50%{transform:translateY(-5px)}60%{transform:translateY(5px)}to{transform:translateY(0)}}@keyframes lock{0%{transform:translateY(0)}20%{transform:translateY(-5px)}30%{transform:translateY(5px)}50%{transform:translateY(-5px)}60%{transform:translateY(5px)}to{transform:translateY(0)}}@-webkit-keyframes unlock{0%{transform:rotate(-15deg)}15%{transform:rotate(-40deg)}30%{transform:rotate(5deg)}45%{transform:rotate(-30deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(-20deg)}90%{transform:rotate(-15deg)}to{transform:rotate(-15deg)}}@keyframes unlock{0%{transform:rotate(-15deg)}15%{transform:rotate(-40deg)}30%{transform:rotate(5deg)}45%{transform:rotate(-30deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(-20deg)}90%{transform:rotate(-15deg)}to{transform:rotate(-15deg)}}@-webkit-keyframes hourglass{0%{transform:rotate(0)}35%{transform:rotate(180deg)}65%{transform:rotate(180deg)}to{transform:rotate(0)}}@keyframes hourglass{0%{transform:rotate(0)}35%{transform:rotate(180deg)}65%{transform:rotate(180deg)}to{transform:rotate(0)}}@-webkit-keyframes write{0%{transform:translate(0)}15%{transform:translate(-10px,-5px)}30%{transform:translate(-10px,5px)}45%{transform:translate(-5px,-5px)}60%{transform:translate(-5px,5px)}75%{transform:translate(0)}to{transform:translate(10px)}}@keyframes write{0%{transform:translate(0)}15%{transform:translate(-10px,-5px)}30%{transform:translate(-10px,5px)}45%{transform:translate(-5px,-5px)}60%{transform:translate(-5px,5px)}75%{transform:translate(0)}to{transform:translate(10px)}}@-webkit-keyframes rocket{0%{transform:translate(0);opacity:1}5%{transform:translate(2px);opacity:1}10%{transform:translate(1px,-2px);opacity:1}15%{transform:translate(3px,-1px);opacity:1}20%{transform:translate(2px,-3px);opacity:1}25%{transform:translate(4px,-2px);opacity:1}50%{transform:translate(10px,-10px);opacity:0}51%{transform:translate(-10px,10px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes rocket{0%{transform:translate(0);opacity:1}5%{transform:translate(2px);opacity:1}10%{transform:translate(1px,-2px);opacity:1}15%{transform:translate(3px,-1px);opacity:1}20%{transform:translate(2px,-3px);opacity:1}25%{transform:translate(4px,-2px);opacity:1}50%{transform:translate(10px,-10px);opacity:0}51%{transform:translate(-10px,10px);opacity:0}to{transform:translate(0);opacity:1}}@-webkit-keyframes left-right{0%{transform:translateX(0)}15%{transform:translateX(5px)}30%{transform:translateX(-5px)}45%{transform:translateX(3px)}60%{transform:translateX(-3px)}75%{transform:translateX(0)}to{transform:translateX(0)}}@keyframes left-right{0%{transform:translateX(0)}15%{transform:translateX(5px)}30%{transform:translateX(-5px)}45%{transform:translateX(3px)}60%{transform:translateX(-3px)}75%{transform:translateX(0)}to{transform:translateX(0)}}"]
},] }
];
AnimatedMatIconComponent.propDecorators = {
icon: [{ type: input }],
animation: [{ type: input }],
onHover: [{ type: input }],
color: [{ type: input }],
size: [{ type: input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5pbWF0ZWQtbWF0LWljb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5pbWF0ZWQtbWF0LWljb24vc3JjL2xpYi9hbmltYXRlZC1tYXQtaWNvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLElBQUksS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBVzFELE1BQU0sT0FBTyx3QkFBd0I7OztZQVRwQyxTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLG1CQUFtQjtnQkFDN0IsUUFBUSxFQUFFOztHQUVUOzthQUlGOzs7bUJBR0UsS0FBSzt3QkFHTCxLQUFLO3NCQUdMLEtBQUs7b0JBR0wsS0FBSzttQkFHTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCBhcyBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhbmltYXRlZC1tYXQtaWNvbicsXG4gIHRlbXBsYXRlOiBgXG4gICAgPG1hdC1pY29uIFtjbGFzc109XCJvbkhvdmVyID8gYW5pbWF0aW9uKyctaG92ZXInIDogYW5pbWF0aW9uXCIgW3N0eWxlLmNvbG9yXT1cImNvbG9yXCIgW3N0eWxlLmZvbnQtc2l6ZV09XCJzaXplXCI+e3tpY29ufX08L21hdC1pY29uPlxuICBgLFxuICBzdHlsZVVybHM6IFtcbiAgICAnLi9hbmltYXRlZC1tYXQtaWNvbi5jb21wb25lbnQuY3NzJ1xuICBdXG59KVxuZXhwb3J0IGNsYXNzIEFuaW1hdGVkTWF0SWNvbkNvbXBvbmVudCB7XG5cbiAgQGlucHV0KClcbiAgaWNvbiE6IHN0cmluZztcblxuICBAaW5wdXQoKVxuICBhbmltYXRpb24hOiBzdHJpbmc7XG5cbiAgQGlucHV0KClcbiAgb25Ib3ZlciE6IGJvb2xlYW47XG5cbiAgQGlucHV0KClcbiAgY29sb3IhOiBzdHJpbmc7XG5cbiAgQGlucHV0KClcbiAgc2l6ZSE6IHN0cmluZztcblxufVxuIl19