diff --git a/.gitignore b/.gitignore index c18cde3..f77e4ce 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ node_modules -dist bin .tmp src/vendor diff --git a/Gruntfile.js b/Gruntfile.js index 6e232b9..a61cc61 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -86,6 +86,10 @@ module.exports = function(grunt) { 'concat:banner' ]); + grunt.registerTask('test', [ + 'build' + ]); + grunt.registerTask('default', [ 'build' ]); diff --git a/bower.json b/bower.json index 0ebc6dc..ea8bbcf 100644 --- a/bower.json +++ b/bower.json @@ -15,6 +15,7 @@ "test", "node_modules", "src", + "demo", ".travis.yml" ], "dependencies": {}, diff --git a/dist/font-awesome-animation.css b/dist/font-awesome-animation.css new file mode 100644 index 0000000..e73e17c --- /dev/null +++ b/dist/font-awesome-animation.css @@ -0,0 +1,302 @@ +/*! + * font-awesome-animation - v0.0.2 + * https://github.com/l-lin/font-awesome-animation + */ +@-moz-keyframes wrenching { + 0%{-moz-transform:rotate(-12deg)} + 8%{-moz-transform:rotate(12deg)} + 10%{-moz-transform:rotate(24deg)} + 18%{-moz-transform:rotate(-24deg)} + 20%{-moz-transform:rotate(-24deg)} + 28%{-moz-transform:rotate(24deg)} + 30%{-moz-transform:rotate(24deg)} + 38%{-moz-transform:rotate(-24deg)} + 40%{-moz-transform:rotate(-24deg)} + 48%{-moz-transform:rotate(24deg)} + 50%{-moz-transform:rotate(24deg)} + 58%{-moz-transform:rotate(-24deg)} + 60%{-moz-transform:rotate(-24deg)} + 68%{-moz-transform:rotate(24deg)} + 75%{-moz-transform:rotate(0deg)} +} +@-webkit-keyframes wrenching { + 0%{-webkit-transform:rotate(-12deg)} + 8%{-webkit-transform:rotate(12deg)} + 10%{-webkit-transform:rotate(24deg)} + 18%{-webkit-transform:rotate(-24deg)} + 20%{-webkit-transform:rotate(-24deg)} + 28%{-webkit-transform:rotate(24deg)} + 30%{-webkit-transform:rotate(24deg)} + 38%{-webkit-transform:rotate(-24deg)} + 40%{-webkit-transform:rotate(-24deg)} + 48%{-webkit-transform:rotate(24deg)} + 50%{-webkit-transform:rotate(24deg)} + 58%{-webkit-transform:rotate(-24deg)} + 60%{-webkit-transform:rotate(-24deg)} + 68%{-webkit-transform:rotate(24deg)} + 75%{-webkit-transform:rotate(0deg)} +} +@-o-keyframes wrenching { + 0%{-o-transform:rotate(-12deg)} + 8%{-o-transform:rotate(12deg)} + 10%{-o-transform:rotate(24deg)} + 18%{-o-transform:rotate(-24deg)} + 20%{-o-transform:rotate(-24deg)} + 28%{-o-transform:rotate(24deg)} + 30%{-o-transform:rotate(24deg)} + 38%{-o-transform:rotate(-24deg)} + 40%{-o-transform:rotate(-24deg)} + 48%{-o-transform:rotate(24deg)} + 50%{-o-transform:rotate(24deg)} + 58%{-o-transform:rotate(-24deg)} + 60%{-o-transform:rotate(-24deg)} + 68%{-o-transform:rotate(24deg)} + 75%{-o-transform:rotate(0deg)} +} +@-ms-keyframes wrenching { + 0%{-ms-transform:rotate(-12deg)} + 8%{-ms-transform:rotate(12deg)} + 10%{-ms-transform:rotate(24deg)} + 18%{-ms-transform:rotate(-24deg)} + 20%{-ms-transform:rotate(-24deg)} + 28%{-ms-transform:rotate(24deg)} + 30%{-ms-transform:rotate(24deg)} + 38%{-ms-transform:rotate(-24deg)} + 40%{-ms-transform:rotate(-24deg)} + 48%{-ms-transform:rotate(24deg)} + 50%{-ms-transform:rotate(24deg)} + 58%{-ms-transform:rotate(-24deg)} + 60%{-ms-transform:rotate(-24deg)} + 68%{-ms-transform:rotate(24deg)} + 75%{-ms-transform:rotate(0deg)} +} +@keyframes wrenching { + 0%{transform:rotate(-12deg)} + 8%{transform:rotate(12deg)} + 10%{transform:rotate(24deg)} + 18%{transform:rotate(-24deg)} + 20%{transform:rotate(-24deg)} + 28%{transform:rotate(24deg)} + 30%{transform:rotate(24deg)} + 38%{transform:rotate(-24deg)} + 40%{transform:rotate(-24deg)} + 48%{transform:rotate(24deg)} + 50%{transform:rotate(24deg)} + 58%{transform:rotate(-24deg)} + 60%{transform:rotate(-24deg)} + 68%{transform:rotate(24deg)} + 75%{transform:rotate(0deg)} +} +.wrenching-animation.animation, .wrenching-animation.animation-hover:hover { + display: inline-block; + -moz-animation: wrenching 2.5s ease 4; + -moz-transform-origin-x: 90%; + -moz-transform-origin-y: 35%; + -moz-transform-origin-z: initial; + + -webkit-animation: wrenching 2.5s ease 4; + -webkit-transform-origin-x: 90%; + -webkit-transform-origin-y: 35%; + -webkit-transform-origin-z: initial; + + -ms-animation: wrenching 2.5s ease 4; + -ms-transform-origin-x: 90%; + -ms-transform-origin-y: 35%; + -ms-transform-origin-z: initial; + + animation: wrenching 2.5s ease 4; + transform-origin-x: 90%; + transform-origin-y: 35%; + transform-origin-z: initial; +} + +/* BELL */ +@-moz-keyframes ringing { + 0%{-moz-transform:rotate(-15deg)} + 2%{-moz-transform:rotate(15deg)} + 4%{-moz-transform:rotate(-18deg)} + 6%{-moz-transform:rotate(18deg)} + 8%{-moz-transform:rotate(-22deg)} + 10%{-moz-transform:rotate(22deg)} + 12%{-moz-transform:rotate(-18deg)} + 14%{-moz-transform:rotate(18deg)} + 16%{-moz-transform:rotate(-12deg)} + 18%{-moz-transform:rotate(12deg)} + 20%{-moz-transform:rotate(0deg)} +} +@-webkit-keyframes ringing { + 0%{-webkit-transform:rotate(-15deg)} + 2%{-webkit-transform:rotate(15deg)} + 4%{-webkit-transform:rotate(-18deg)} + 6%{-webkit-transform:rotate(18deg)} + 8%{-webkit-transform:rotate(-22deg)} + 10%{-webkit-transform:rotate(22deg)} + 12%{-webkit-transform:rotate(-18deg)} + 14%{-webkit-transform:rotate(18deg)} + 16%{-webkit-transform:rotate(-12deg)} + 18%{-webkit-transform:rotate(12deg)} + 20%{-webkit-transform:rotate(0deg)} +} +@-ms-keyframes ringing { + 0%{-ms-transform:rotate(-15deg)} + 2%{-ms-transform:rotate(15deg)} + 4%{-ms-transform:rotate(-18deg)} + 6%{-ms-transform:rotate(18deg)} + 8%{-ms-transform:rotate(-22deg)} + 10%{-ms-transform:rotate(22deg)} + 12%{-ms-transform:rotate(-18deg)} + 14%{-ms-transform:rotate(18deg)} + 16%{-ms-transform:rotate(-12deg)} + 18%{-ms-transform:rotate(12deg)} + 20%{-ms-transform:rotate(0deg)} +} +@keyframes ringing { + 0%{transform:rotate(-15deg)} + 2%{transform:rotate(15deg)} + 4%{transform:rotate(-18deg)} + 6%{transform:rotate(18deg)} + 8%{transform:rotate(-22deg)} + 10%{transform:rotate(22deg)} + 12%{transform:rotate(-18deg)} + 14%{transform:rotate(18deg)} + 16%{transform:rotate(-12deg)} + 18%{transform:rotate(12deg)} + 20%{transform:rotate(0deg)} +} +.ringing-animation.animation, .ringing-animation.animation-hover:hover { + display: inline-block; + -moz-animation: ringing 2s ease 5; + -moz-transform-origin-x: 50%; + -moz-transform-origin-y: 0px; + -moz-transform-origin-z: initial; + + -webkit-animation: ringing 2s ease 5; + -webkit-transform-origin-x: 50%; + -webkit-transform-origin-y: 0px; + -webkit-transform-origin-z: initial; + + -ms-animation: ringing 2s ease 5; + -ms-transform-origin-x: 50%; + -ms-transform-origin-y: 0px; + -ms-transform-origin-z: initial; + + animation: ringing 2s ease 5; + transform-origin-x: 50%; + transform-origin-y: 0px; + transform-origin-z: initial; +} + +/* VERTICAL */ +@-moz-keyframes vertical { + 0%{-moz-transform:translate(0,-3px)} + 4%{-moz-transform:translate(0,3px)} + 8%{-moz-transform:translate(0,-3px)} + 12%{-moz-transform:translate(0,3px)} + 16%{-moz-transform:translate(0,-3px)} + 20%{-moz-transform:translate(0,3px)} + 22%{-moz-transform:translate(0,0)} +} +@-webkit-keyframes vertical { + 0%{-webkit-transform:translate(0,-3px)} + 4%{-webkit-transform:translate(0,3px)} + 8%{-webkit-transform:translate(0,-3px)} + 12%{-webkit-transform:translate(0,3px)} + 16%{-webkit-transform:translate(0,-3px)} + 20%{-webkit-transform:translate(0,3px)} + 22%{-webkit-transform:translate(0,0)} +} +@-ms-keyframes vertical { + 0%{-ms-transform:translate(0,-3px)} + 4%{-ms-transform:translate(0,3px)} + 8%{-ms-transform:translate(0,-3px)} + 12%{-ms-transform:translate(0,3px)} + 16%{-ms-transform:translate(0,-3px)} + 20%{-ms-transform:translate(0,3px)} + 22%{-ms-transform:translate(0,0)} +} +@keyframes vertical { + 0%{transform:translate(0,-3px)} + 4%{transform:translate(0,3px)} + 8%{transform:translate(0,-3px)} + 12%{transform:translate(0,3px)} + 16%{transform:translate(0,-3px)} + 20%{transform:translate(0,3px)} + 22%{transform:translate(0,0)} +} +.vertical-animation.animation, .vertical-animation.animation-hover:hover { + display: inline-block; + -moz-animation: vertical 2s ease 5; + -webkit-animation: vertical 2s ease 5; + -ms-animation: vertical 2s ease 5; + animation: vertical 2s ease 5; +} + +/* HORIZONTAL */ +@-moz-keyframes horizontal { + 0%{-moz-transform:translate(0,0)} + 6%{-moz-transform:translate(5px,0)} + 12%{-moz-transform:translate(0,0)} + 18%{-moz-transform:translate(5px,0)} + 24%{-moz-transform:translate(0,0)} + 30%{-moz-transform:translate(5px,0)} + 36%{-moz-transform:translate(0,0)} +} +@-webkit-keyframes horizontal { + 0%{-webkit-transform:translate(0,0)} + 6%{-webkit-transform:translate(5px,0)} + 12%{-webkit-transform:translate(0,0)} + 18%{-webkit-transform:translate(5px,0)} + 24%{-webkit-transform:translate(0,0)} + 30%{-webkit-transform:translate(5px,0)} + 36%{-webkit-transform:translate(0,0)} +} +@-ms-keyframes horizontal { + 0%{-ms-transform:translate(0,0)} + 6%{-ms-transform:translate(5px,0)} + 12%{-ms-transform:translate(0,0)} + 18%{-ms-transform:translate(5px,0)} + 24%{-ms-transform:translate(0,0)} + 30%{-ms-transform:translate(5px,0)} + 36%{-ms-transform:translate(0,0)} +} +@keyframes horizontal { + 0%{transform:translate(0,0)} + 6%{transform:translate(5px,0)} + 12%{transform:translate(0,0)} + 18%{transform:translate(5px,0)} + 24%{transform:translate(0,0)} + 30%{transform:translate(5px,0)} + 36%{transform:translate(0,0)} +} +.horizontal-animation.animation, .horizontal-animation.animation-hover:hover { + display:inline-block; + -moz-animation: horizontal 2s ease 5; + -webkit-animation: horizontal 2s ease 5; + -ms-animation: horizontal 2s ease 5; + animation: horizontal 2s ease 5; +} + +/* FLASHING */ +@-moz-keyframes flash { + 0%,100%,50%{opacity:1} + 25%,75%{opacity:0} +} +@-webkit-keyframes flash { + 0%,100%,50%{opacity:1} + 25%,75%{opacity:0} +} +@-ms-keyframes flash { + 0%,100%,50%{opacity:1} + 25%,75%{opacity:0} +} +@keyframes flash { + 0%,100%,50%{opacity:1} + 25%,75%{opacity:0} +} +.flash-animation.animation, .flash-animation.animation-hover:hover { + display:inline-block; + -moz-animation: flash 2s ease 5; + -webkit-animation: flash 2s ease 5; + -ms-animation: flash 2s ease 5; + animation: flash 2s ease 5; +} \ No newline at end of file diff --git a/dist/font-awesome-animation.min.css b/dist/font-awesome-animation.min.css new file mode 100644 index 0000000..0d4c67f --- /dev/null +++ b/dist/font-awesome-animation.min.css @@ -0,0 +1,6 @@ +/*! + * font-awesome-animation - v0.0.2 + * https://github.com/l-lin/font-awesome-animation + */ + +@-moz-keyframes wrenching{0%{-moz-transform:rotate(-12deg)}8%{-moz-transform:rotate(12deg)}10%{-moz-transform:rotate(24deg)}18%,20%{-moz-transform:rotate(-24deg)}28%,30%{-moz-transform:rotate(24deg)}38%,40%{-moz-transform:rotate(-24deg)}48%,50%{-moz-transform:rotate(24deg)}58%,60%{-moz-transform:rotate(-24deg)}68%{-moz-transform:rotate(24deg)}75%{-moz-transform:rotate(0deg)}}@-webkit-keyframes wrenching{0%{-webkit-transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg)}18%,20%{-webkit-transform:rotate(-24deg)}28%,30%{-webkit-transform:rotate(24deg)}38%,40%{-webkit-transform:rotate(-24deg)}48%,50%{-webkit-transform:rotate(24deg)}58%,60%{-webkit-transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg)}75%{-webkit-transform:rotate(0deg)}}@-o-keyframes wrenching{0%{-o-transform:rotate(-12deg)}8%{-o-transform:rotate(12deg)}10%{-o-transform:rotate(24deg)}18%,20%{-o-transform:rotate(-24deg)}28%,30%{-o-transform:rotate(24deg)}38%,40%{-o-transform:rotate(-24deg)}48%,50%{-o-transform:rotate(24deg)}58%,60%{-o-transform:rotate(-24deg)}68%{-o-transform:rotate(24deg)}75%{-o-transform:rotate(0deg)}}@-ms-keyframes wrenching{0%{-ms-transform:rotate(-12deg)}8%{-ms-transform:rotate(12deg)}10%{-ms-transform:rotate(24deg)}18%,20%{-ms-transform:rotate(-24deg)}28%,30%{-ms-transform:rotate(24deg)}38%,40%{-ms-transform:rotate(-24deg)}48%,50%{-ms-transform:rotate(24deg)}58%,60%{-ms-transform:rotate(-24deg)}68%{-ms-transform:rotate(24deg)}75%{-ms-transform:rotate(0deg)}}@keyframes wrenching{0%{transform:rotate(-12deg)}8%{transform:rotate(12deg)}10%{transform:rotate(24deg)}18%,20%{transform:rotate(-24deg)}28%,30%{transform:rotate(24deg)}38%,40%{transform:rotate(-24deg)}48%,50%{transform:rotate(24deg)}58%,60%{transform:rotate(-24deg)}68%{transform:rotate(24deg)}75%{transform:rotate(0deg)}}.wrenching-animation.animation,.wrenching-animation.animation-hover:hover{display:inline-block;-moz-animation:wrenching 2.5s ease 4;-moz-transform-origin-x:90%;-moz-transform-origin-y:35%;-moz-transform-origin-z:initial;-webkit-animation:wrenching 2.5s ease 4;-webkit-transform-origin-x:90%;-webkit-transform-origin-y:35%;-webkit-transform-origin-z:initial;-ms-animation:wrenching 2.5s ease 4;-ms-transform-origin-x:90%;-ms-transform-origin-y:35%;-ms-transform-origin-z:initial;animation:wrenching 2.5s ease 4;transform-origin-x:90%;transform-origin-y:35%;transform-origin-z:initial}@-moz-keyframes ringing{0%{-moz-transform:rotate(-15deg)}2%{-moz-transform:rotate(15deg)}4%{-moz-transform:rotate(-18deg)}6%{-moz-transform:rotate(18deg)}8%{-moz-transform:rotate(-22deg)}10%{-moz-transform:rotate(22deg)}12%{-moz-transform:rotate(-18deg)}14%{-moz-transform:rotate(18deg)}16%{-moz-transform:rotate(-12deg)}18%{-moz-transform:rotate(12deg)}20%{-moz-transform:rotate(0deg)}}@-webkit-keyframes ringing{0%{-webkit-transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg)}20%{-webkit-transform:rotate(0deg)}}@-ms-keyframes ringing{0%{-ms-transform:rotate(-15deg)}2%{-ms-transform:rotate(15deg)}4%{-ms-transform:rotate(-18deg)}6%{-ms-transform:rotate(18deg)}8%{-ms-transform:rotate(-22deg)}10%{-ms-transform:rotate(22deg)}12%{-ms-transform:rotate(-18deg)}14%{-ms-transform:rotate(18deg)}16%{-ms-transform:rotate(-12deg)}18%{-ms-transform:rotate(12deg)}20%{-ms-transform:rotate(0deg)}}@keyframes ringing{0%{transform:rotate(-15deg)}2%{transform:rotate(15deg)}4%{transform:rotate(-18deg)}6%{transform:rotate(18deg)}8%{transform:rotate(-22deg)}10%{transform:rotate(22deg)}12%{transform:rotate(-18deg)}14%{transform:rotate(18deg)}16%{transform:rotate(-12deg)}18%{transform:rotate(12deg)}20%{transform:rotate(0deg)}}.ringing-animation.animation,.ringing-animation.animation-hover:hover{display:inline-block;-moz-animation:ringing 2s ease 5;-moz-transform-origin-x:50%;-moz-transform-origin-y:0;-moz-transform-origin-z:initial;-webkit-animation:ringing 2s ease 5;-webkit-transform-origin-x:50%;-webkit-transform-origin-y:0;-webkit-transform-origin-z:initial;-ms-animation:ringing 2s ease 5;-ms-transform-origin-x:50%;-ms-transform-origin-y:0;-ms-transform-origin-z:initial;animation:ringing 2s ease 5;transform-origin-x:50%;transform-origin-y:0;transform-origin-z:initial}@-moz-keyframes vertical{0%{-moz-transform:translate(0,-3px)}4%{-moz-transform:translate(0,3px)}8%{-moz-transform:translate(0,-3px)}12%{-moz-transform:translate(0,3px)}16%{-moz-transform:translate(0,-3px)}20%{-moz-transform:translate(0,3px)}22%{-moz-transform:translate(0,0)}}@-webkit-keyframes vertical{0%{-webkit-transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px)}22%{-webkit-transform:translate(0,0)}}@-ms-keyframes vertical{0%{-ms-transform:translate(0,-3px)}4%{-ms-transform:translate(0,3px)}8%{-ms-transform:translate(0,-3px)}12%{-ms-transform:translate(0,3px)}16%{-ms-transform:translate(0,-3px)}20%{-ms-transform:translate(0,3px)}22%{-ms-transform:translate(0,0)}}@keyframes vertical{0%{transform:translate(0,-3px)}4%{transform:translate(0,3px)}8%{transform:translate(0,-3px)}12%{transform:translate(0,3px)}16%{transform:translate(0,-3px)}20%{transform:translate(0,3px)}22%{transform:translate(0,0)}}.vertical-animation.animation,.vertical-animation.animation-hover:hover{display:inline-block;-moz-animation:vertical 2s ease 5;-webkit-animation:vertical 2s ease 5;-ms-animation:vertical 2s ease 5;animation:vertical 2s ease 5}@-moz-keyframes horizontal{0%{-moz-transform:translate(0,0)}6%{-moz-transform:translate(5px,0)}12%{-moz-transform:translate(0,0)}18%{-moz-transform:translate(5px,0)}24%{-moz-transform:translate(0,0)}30%{-moz-transform:translate(5px,0)}36%{-moz-transform:translate(0,0)}}@-webkit-keyframes horizontal{0%{-webkit-transform:translate(0,0)}6%{-webkit-transform:translate(5px,0)}12%{-webkit-transform:translate(0,0)}18%{-webkit-transform:translate(5px,0)}24%{-webkit-transform:translate(0,0)}30%{-webkit-transform:translate(5px,0)}36%{-webkit-transform:translate(0,0)}}@-ms-keyframes horizontal{0%{-ms-transform:translate(0,0)}6%{-ms-transform:translate(5px,0)}12%{-ms-transform:translate(0,0)}18%{-ms-transform:translate(5px,0)}24%{-ms-transform:translate(0,0)}30%{-ms-transform:translate(5px,0)}36%{-ms-transform:translate(0,0)}}@keyframes horizontal{0%{transform:translate(0,0)}6%{transform:translate(5px,0)}12%{transform:translate(0,0)}18%{transform:translate(5px,0)}24%{transform:translate(0,0)}30%{transform:translate(5px,0)}36%{transform:translate(0,0)}}.horizontal-animation.animation,.horizontal-animation.animation-hover:hover{display:inline-block;-moz-animation:horizontal 2s ease 5;-webkit-animation:horizontal 2s ease 5;-ms-animation:horizontal 2s ease 5;animation:horizontal 2s ease 5}@-moz-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@-ms-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash-animation.animation,.flash-animation.animation-hover:hover{display:inline-block;-moz-animation:flash 2s ease 5;-webkit-animation:flash 2s ease 5;-ms-animation:flash 2s ease 5;animation:flash 2s ease 5} \ No newline at end of file