UNPKG

animated-mat-icon

Version:

A simple lightweight package for animating angular mat icons

1 lines 12.4 kB
{"__symbolic":"module","version":4,"metadata":{"AnimatedMatIconModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":8,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"animated-mat-icon","template":"\n <mat-icon [class]=\"onHover ? animation+'-hover' : animation\" [style.color]=\"color\" [style.font-size]=\"size\">{{icon}}</mat-icon>\n ","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)}}"]}]}],"members":{"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"animation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"onHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}]}}},"origins":{"AnimatedMatIconModule":"./lib/animated-mat-icon.module","ɵa":"./lib/animated-mat-icon.component"},"importAs":"animated-mat-icon"}